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

 

關於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 }

 

轉自： http://www.cnblogs.com/wshiqtb/p/5607637.html