export、exports、modules.exports 和 require 、import 的一些組合套路和坑

 

 

推薦閱讀第三方文章：

http://www.tuicool.com/articles/uuUVBv2

 

引入： require / import 

導出：export / module.exports / exports 

Nodejs 不支持 import 和 export

es6 兼容以上所有語法，當然需要 webpack + babel 來支撐

盡管es6兼容以上所有語法，但需要注意：

在webpack打包的時候，可以在js文件中混用 require 和 export。但是不能混用 import 以及 module.exports

“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”

解決辦法就是統一改成 ES6 的方式編寫： import 和 export  

但如果使用export default ... 的方式，是無法使用import { ... } from '...' 的高逼格方式的，如果我硬要使用這種方式怎么辦呢？其實可以這樣: export {...}

需要注意的是，這里的{ ... } 不能自定義key，只能以真實的函數名或者類名導出

 

 

 

如果是這樣混用的話，單元測試的時候就會很糟糕。舉個例子：

我新建一個fuck.test.js，Nodejs 中我引入（require）了一個 es6 寫的類庫用來測試。但這個類都是使用 export default { ... } 的方式導出的。

前面說過，Nodejs 是不支持 export 的。所以會報錯。不僅如此，如果該es6類庫還使用了 import 語法引入了其他庫。更加會報錯。因為nodejs不支持import。

解決方案是什么呢？有沒有想過，為什么其他第三方庫可以正常引入無論是es6還是nodejs？這需要套路！

套路：  先不考慮其他第三方是如何做到的。我們先自己約束和規范好。

　　　  譬如說，引入文件的方式使用雙方通用的require！

　　      但導出怎么辦？雙方似乎沒有協同點？沒關系。我們可以從 es6 + webpack + babel 入手： http://npm.taobao.org/package/babel-plugin-transform-es2015-modules-commonjs

　　　  下載並且使用這個babel插件：在,babelrc的plugins中加入代碼： "plugins": ["transform-es2015-modules-commonjs"]

             然后，我們的es6代碼就支持 module.exports 了。這樣一來，我們的導出統一使用 module.exports （需要babel插件支持）即可！

             總而言之一句話：導入用require, 導出用module.exports 

　　　（ps: 不知從什么時候開始，es6居然已經支持module.exports了。） 

 

---

  

es6 : import { ... } from '...'  

lib.js:

// 多重導出export
export const a = () => 123
export const b = () => 456
export const c = () => 789

__________________________________________________________

// 使用 nodejs 內置的 global.module.exports 方法導出
module.exports = {
    a: () => 123,
    b: () => 456,
    c: () => 789,
}

__________________________________________________________

// export 對象導出，請注意，這里的 { a, b, c } 並不是es6 對 key: value 形式的縮寫，而是只能以這種方式寫
const a = () => 123
const b = () => 456
const c = () => 789
export { a, b, c }

__________________________________________________________

main.js:
import { a, b, c } from './lib.js'
console.log(a()) // => 123
console.log(b()) // => 345
console.log(c()) // => 678

   

es6：export default { foo, bar, baz... }

注意，這里也支持單獨導出一個，如 export default incrementCounter

// export default {...}
export default {
    a: () => 123,
    b: () => 456,
    c: () => 789
}

// import
import foo from './lib.js'
console.log(foo) // => {a: ƒ, b: ƒ, c: ƒ}

// require
var bar = require('./lib.js')
console.log(bar) // => {default: {…}, __esModule: true}
console.log(bar.default) // => {a: ƒ, b: ƒ, c: ƒ}

  

---

 

nodejs：exports.foobar 和 module.exports 對比

http://www.cnblogs.com/wbxjiayou/p/5767632.html

總結以下幾點：

1. 對於只導出屬性的情況，可以簡單直接使用 exports.foobar 的方式。當然函數也可以這樣使用，只是使用場景較少；通常建議直接使用module.exports

2. 對於類，為了直接使導出的內容作為類的構造器可以讓調用者使用new操作符創建實例對象，應該把構造函數掛到module.exports對象上，不要和導出屬性值混在一起；

3. 需要將模塊定義為一個類或函數時，只能使用“module.exports” 的書寫方法；
   

exports.spa_shell = function fn () {};  

// 接收示例
let abc = require('./spa.shell.js');
import abc from './spa.shell.js';

// 使用示例
abc.spa_shell.initModule( $container );

 module.exports = function fn() {};  

// 接收示例
let abc = require('./spa.shell.js');
import abc from './spa.shell.js';

// 使用示例
abc.initModule( $container );