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