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 );