import

import 和 require 的區別

import 和js的發展歷史息息相關，歷史上 js沒有模組(module)體系，無法將一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。這對開發大型工程非常不方便。 在 ES6 之前，社群制定了一些模組載入方案，最主要的有 CommonJS 和 AMD 兩種。前者用於伺服器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範，成為瀏覽器和伺服器通用的模組解決方案。也就是我們常見的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');` 。 ES6 在語言標準的層面上，實現了模組功能。ES6 模組不是物件，而是通過export命令顯式指定輸出的程式碼，再通過import命令輸入。

import 的幾種用法:

1. import defaultName from 'modules.js';
2. import { export } from 'modules';
3. import { export as ex1 } from 'modules';
4. import { export1, export2 } from 'modules.js';
5. import { export1 as ex1, export2 as ex2 } from 'moduls.js';
6. import defaultName, { expoprt } from 'modules';
7. import * as moduleName from 'modules.js';
8. import defaultName， * as moduleName from 'modules';
9. import 'modules';
 

import用法解釋

• import後面的from指定模組檔案的位置，可以是相對路徑，也可以是絕對路徑，.js字尾可以省略。如果只是模組名，不帶有路徑，那麼必須有配置檔案，告訴 JavaScript 引擎該模組的位置。某些打包工具可以允許或要求使用副檔名。
• 上面程式碼使用的 ==as== 關鍵字，相當於import 進來的‘值’的別名。
• import * from 'xx' 將匯入整個模組的內容，而 import defaultName 和 import { export1， export2 } 將匯入export的某個物件或值
• 最後一種方式 import 'modules' 將執行模組中的全域性程式碼，而不匯入任何值。
• import的形式需要export的支援，比如 import defaultName from 'module.js 將匯出 在modules.js中export default的物件或值。

export

如上，export也是es6的內容，和import是一對。

export的幾種用法

1.export { name1, name2, …, nameN };
2.export { variable1 as name1, variable2 as name2, …, nameN };
3.export let name1, name2, …, nameN; // also var
4.export let name1 = …, name2 = …, …, nameN; // also var, const
5.export function FunctionName() {...}
6.export class ClassName {...}

7.export default expression;
8.export default function (…) { … } // also class, function*
9.export default function name1(…) { … } // also class, function*
10.export { name1 as default, … };

11.export * from …;
12.export { name1, name2, …, nameN } from …;
13.export { import1 as name1, import2 as name2, …, nameN } from …;

export用法解釋

• 命名匯出

比如：

<!--module.js-->
const ex1 = 'xxx';
const fun = function() {...}
export { ex1, fun as demoFun};
export let ex2 = 'demo';
export function multiply(x, y) {
  return x * y;
};

對應的import 寫法

<!--main.js-->
import { ex1, demoFun, ex2, multiply } from 'module.js';

• 預設匯出

export 命名匯出需要export 名字和import名字嚴格一致。而export default命令，為模組指定預設輸出，在import 的時候可以隨意命名名字。一個模組只能有一個預設輸出，也就是說 export default 一個模組只能用一次。 用法:

// a.js 輸出一個預設函式
export default function add(x, y) { return x + y; }
import anyName from 'a.js';
// b.js 輸出一個預設變數
let name = 'b.js';
export default name;
import anyName from 'b.js'
// c.js 輸出一個類
export default class { ...}
import anyClass from 'c.js';
// d.js  輸出一個值
export default 1;
import value from 'd.js'

• export 和 import 混合使用(模組重定向)

也就是在一個模組之中，先輸入後輸出同一個模組。比如:如:

<!--命名匯出 引入的命名匯出-->
export { foo, bar } from 'my_module';
// 等價為，值得注意的是 在該模組中不能直接使用 foo 和 bar。
import { foo, bar } from 'my_module';
export { foo, bar };

export * from  './other-module';  // 匯出所有方法，但注意此種方法不會到匯出module.js中的預設匯出變數。
// 匯出 預設匯出用下面寫法
export {default} from './other-module';

參考