關於ES6的 模塊功能 Module 中export import的用法和註意之處

export default 的用法

export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export deault命令只能使用一次。所以，import命令後面才不用加大括號，相反其它的export 輸出 可以有多個，且import時必須加大括號，示例如下：

 1 // modules.js
 2 function add(x, y) {
 3   return x * y;
 4 }
 5 export {add as default};
 6 // 等同於
 7 // export default add;
 8 
 9 // app.js
10 import { default as xxx } from ‘modules‘;
11 // 等同於
12 // import xxx from ‘modules‘;

正是因為export default命令其實只是輸出一個叫做default的變量，所以它後面不能跟變量聲明語句，而export需要跟變量聲明或者大括號作為輸出:

 1 // 正確
 2 export var a = 1;
 3 
 4 // 正確
 5 var a = 1;
 6 export default a;　　// 寫法1
 7 export {a}　　// 寫法2
 8 
 9 // 錯誤
10 export default var a = 1;

import 時候的路徑問題(新手容易碰到)

開始玩的時候，總是出現 cannot find module 問題，原來 在 import 的時候 如果不使用相對路徑或者絕對路徑，node默認會去node_modules/文件夾下去找，例如：

1 import * as obj from ‘exports‘
2 // node 會試著去尋找 node_modules/exports.js 模塊
3 
4 // 正確寫法
5 import * as obj from ‘./exports‘

關於 import * as obj from ‘xx‘ 這種寫法是把所有的輸出包裹到obj對象裏

對了，還有模塊的繼承寫法：

 1 // circle.js
 2 export var a = 1;
 3 
 4 // circleplus.js 當前模塊繼承了 circle 模塊的所有輸出
 5 // 此處只是繼承了輸出，並不能直接使用
 6 
 7 export * from ‘circle‘;
 8 export var e = 2.71828182846;
 9 export default function(x) {
10   return Math.exp(x);
11 }
12 
13 // 繼承之後，circleplus.js 相當於下面代碼
14 export var a = 1;
15 export var e = 2.71828182846;
16 export default function(x) {
17   return Math.exp(x);
18 }

（轉）關於ES6的 模塊功能 Module 中export import的用法和註意之處