ES6和Node.js的import和export

記錄一下import和export的幾種寫法。

1.ES6的導入和導出

0.入口文件為index.js，引用add-content.js的內容

1.  export default 方式，直接導出變量

add-content.js的內容如下

function write() {
  document.write('Hello World')
}

var app = {}
app.write = write

export default app;

index.js引用要這樣寫

import app from './add-content'
app.write()

2.  export  { } 方式，適合同時導出多個變量

add-content.js的內容如下

function write() {
  document.write('Hello World')
}

var app = {}
app.write = write

export {
  app
}

index.js引用要加上引號，如下

import { app } from './add-content'
app.write();

3. export與變量聲明的簡寫方式

add-content.js的內容如下

function write() {
  document.write('Hello World')
}

export var app = {
  write: write
}

index.js引用要加上引號，如下

import { app } from './add-content'
app.write();

2.nodejs的導入和導出

0.入口文件為index.js，引用mock.js的內容

1.mock.js中使用module.exports方式導出

module.exports = {
  name: 'mock.js',
  message: 'hello world'
}

index.js引用要這樣寫

let mock = require('./mock')
console.info(mock.name)

2.mock.js中直接使用exports導出

exports.name = 'mock'
exports.message = 'hello world'

index.js引用要這樣寫

let mock = require('./mock')
console.info(mock.name)
console.info(mock.message)

其原理是將exports指向了module.exports，而module.exports在初始化時是一個空對象。

相當於在導出的文件里面添加了如下代碼：

var module = {
  exports: {}
}
var exports = module.exports

3.導出時容易出現的兩個錯誤

3.1 給exports賦值，如下

exports = {
  name: 'mock'
}

由第2部分知：exports是指向了module.exports，如果重新給exports賦值，它會指向新對象，而module.exports還是空對象。

3.2 module.exports和exports混用

exports.name = 'mock'
exports.message = 'hello world'

module.exports = {
  getName () {
    return 'get name function'
  }
}

由於對module.exports進行了賦值，所以exports方式添加的屬性就會丟失，即訪問不到name和message屬性。

 

個人建議使用module.exports = { ... } 導出會比較清晰。

總結一下：

ES6 Moudle：import / export

瀏覽器使用也需要Babel的支持

CommonJS: require / module.exports or exports

node的模塊化規范，瀏覽器使用時需要用browserify解析

AMD: require / defined

是requireJS的規范 define(['./a', './b'], function(a, b) {  //... })

 require是同步導入，支持動態導入，是值拷貝，導出值不會影響導入值；

import是異步導入，導入值會隨導出值變化

備忘~