ES6之Module

// CommonJS模块let { stat, exists, readFile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;

// ES6模块import { stat, exists, readFile } from 'fs';

export

// 导出单个特性export let name1, name2, …, nameN; // also var, constexport let name1 = …, name2 = …, …, nameN; // also var, constexport function FunctionName(){...}export class ClassName {...}// 导出列表export { name1, name2, …, nameN };// 重命名导出export { variable1 as name1, variable2 as name2, …, nameN };// 默认导出export default expression;export default function (…) { … } // also class, function*export default function name1(…) { … } // also class, function*export { name1 as default, … };// Aggregating modulesexport * from …;export { name1, name2, …, nameN } from …;export { import1 as name1, import2 as name2, …, nameN } from …;export { default } from …;

// 报错export 1;// 报错var m = 1;export m;// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export {n as m};

// test.tsexport let foo = 'bar';setTimeout(() => foo = 'baz', 500); // 输出变量foo，值为bar，500 毫秒之后变成baz。// main.tsimport { foo } from './test';console.log(foo);   // barsetTimeout(() => console.log(foo), 100);    // baz

import

import defaultExport from "module-name";import * as name from "module-name";import { export } from "module-name";import { export as alias } from "module-name";import { export1 , export2 } from "module-name";import { foo , bar } from "module-name/path/to/specific/un-exported/file";import { export1 , export2 as alias2 , [...] } from "module-name";import defaultExport, { export [ , [...] ] } from "module-name";import defaultExport, * as name from "module-name";import "module-name";var promise = import("module-name");//这是一个处于第三阶段的提案。

import A, { a } from './xxx.js'a = {}; // Syntax Error : 'a' is read-only;A.a = {};   // errora.foo = 'hello'; // okA.a.foo = 1;    // ok

foo();  // okimport { foo } from 'my_module';import { 'f' + 'oo' } from 'my_module'; // errorlet module = 'my_module';import { foo } from module;  // errorif (x === 1) {  import { foo } from 'module1';     // error} else {  import { foo } from 'module2';     // error}

// 多次加载，但只会执行一次import 'lodash';import 'lodash';import { foo } from 'my_module';import { bar } from 'my_module';// 等同于import { foo, bar } from 'my_module';

整体模块与默认变量

import { area, circumference } from './circle';// 等效于import * as circle from './circle';const { area, circumference } = circle;

// modules.jsfunction add(x, y) {  return x * y;}export {add as default};// 等同于// export default add;// app.jsimport { default as foo } from 'modules';// 等同于// import foo from 'modules';// test.jsexport var a = 1;   // okexport default var a = 1;   // error。将变量a的值赋给变量default，所以报错export 42;   // okvar a = 1;export default a;   // okexport default 42;   // ok// 报错

export 与 import 的复合写法

export { foo, bar } from 'my_module';// 可以简单理解为import { foo, bar } from 'my_module';export { foo, bar };

// 接口改名export { foo as myFoo } from 'my_module';// 具名接口与默认接口相互改写export { es6 as default } from './someModule';  // 这里的default会占用当前文件的default，所以当前模块不能再有 export defaultexport { default } from './someModule'; // （同上）export { default as es6 } from './someModule';// 整体输出，可以看作模块的继承。。但是会忽略my_module模块的default方法，所以需要将my_module的default改写export * from 'my_module';  // 很重要！！！export { default as defaultMyModule } from 'my_module';// 下面三种没有符合写法import * as someIdentifier from "someModule";import someIdentifierDefault from "someModule";import someIdentifierDefault, { namedIdentifier } from "someModule";

跨模块常量

// constants/db.jsexport const db = {  url: 'http://my.couchdbserver.local:5984',  admin_username: 'admin',  admin_password: 'admin password'};// constants/user.jsexport const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];// constants/index.jsexport {db} from './db';export {users} from './users';// script.jsimport {db, users} from './constants/index';

其他

浏览器加载

传统方法

<script src="path/to/myModule.js" defer></script><script src="path/to/myModule.js" async></script>

加载规则

<script type="module" src="./foo.js"></script><!-- 等同于 --><script type="module" src="./foo.js" defer></script>

<script type="module">  import utils from "./utils.js";  // other code</script>

• 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。

• 模块脚本自动采用严格模式，不管有没有声明 use strict。

• 模块之中，可以使用 import 命令加载其他模块（.js 后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用 export 命令输出对外接口。

• 模块之中，顶层的 this 关键字返回 undefined，而不是指向 window。也就是说，在模块顶层使用 this 关键字，是无意义的。

• 同一个模块如果加载多次，将只执行一次。

import utils from 'https://example.com/js/utils.js';const x = 1;console.log(x === window.x); //falseconsole.log(this === undefined); // true// 侦测当前代码是否在 ES6 模块之中const isNotModuleScript = this !== undefined;

ES6 模块与 CommonJS 模块的差异

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

// lib.jsvar counter = 3;function incCounter() {  counter++;}module.exports = {  get counter() {    return counter  },  incCounter: incCounter,};

Node.js 加载

"type": "module",

main 字段

// ./node_modules/es-module-package/package.json{  "type": "module",  "main": "./src/index.js"}// ./my-app.mjsimport { something } from 'es-module-package';// 实际加载的是 ./node_modules/es-module-package/src/index.js

exports 字段

// ./node_modules/es-module-package/package.json{  "exports": {    "./submodule": "./src/submodule.js",    "./features/": "./src/features/"  }}import submodule from 'es-module-package/submodule';// 加载 ./node_modules/es-module-package/src/submodule.jsimport feature from 'es-module-package/features/x.js';// 加载 ./node_modules/es-module-package/src/features/x.js

// 报错import submodule from 'es-module-package/private-module.js';// 不报错import submodule from './node_modules/es-module-package/private-module.js';

{  "exports": {    ".": "./main.js"  }}// 等同于{  "exports": "./main.js"}

{  "main": "./main-legacy.cjs",  "exports": {    ".": "./main-modern.cjs"  }}

{  "type": "module",  "exports": {    ".": {      "require": "./main.cjs",      "default": "./main.js"    },    "./feature": "./lib/feature.js"  }}

ES6 模块加载 CommonJS 模块

// ./node_modules/pkg/index.cjsexports.name = 'value';// ./node_modules/pkg/wrapper.mjsimport cjsModule from './index.cjs';export const name = cjsModule.name;

CommonJS 模块加载 ES6 模块

(async () => {  await import('./my-app.mjs');})();

其他

// ES6 模块中将报错import { something } from './index';import './foo.mjs?query=1'; // 加载 ./foo 传入参数 ?query=1

• arguments

• require

• module

• exports

• __filename

• __dirname

循环加载

{  id: '...',  exports: { ... },  loaded: true,  ...}