1.ES6モジュール性（統一されたモジュール化仕様）
ではES6モジュラー仕様の誕生前に、JavascriptコミュニティがしようとしてきたAMD、CMD、CommonJSおよび他のモジュールの仕様。
ただし、これらのコミュニティによって提案されたモジュラー標準には、まだ特定の違いと制限があり、次のようなブラウザとサーバーの一般的なモジュラー標準ではありません。
-
AMDそしてCMDブラウザ側のJavascriptモジュール性 -
CommonJSサーバー側のJavascriptモジュール化
したがって、ES6文法仕様では、ES6モジュラー仕様は言語レベルで定義されます。これは、ブラウザー側とサーバー側で共通のモジュラー開発仕様です。
ES6モジュラー仕様で定義：
- 各
jsファイルは独立したモジュールです importキーワードを使用してモジュールメンバーをインポートする- モジュールメンバーの
exportキーワードの使用を公開する
2.ES6モジュール性の基本的な文法
2.1デフォルトのエクスポート、デフォルトのインポート
- デフォルトのエクスポート構文：
export default 默认导出的成员 - デフォルトのインポート構文：
import 接收名称 from 模块标识符
// 当前文件模块为 m1.js
// 定义私有成员 a 和 c
let a = 10;
let c = 20;
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30;
function show() {
};
// 将本模块中的私有成员暴露出去，供其它模块使用
export default {
a,
c,
show
};
// 导入模块成员
import m1 from './m1.js'
console.log(m1);
// 打印输出的结果为：
// { a: 10, c: 20, show: [Function: show] }
注：各モジュールでは、1回のみ許可されますexport default。それ以外の場合は、エラーが報告されます。
2.2オンデマンドでエクスポート、オンデマンドでインポート
-
オンデマンドで構文をエクスポート：
export let s1 = 10 -
オンデマンドで構文をインポートします。
import { s1 } from '模块标识符'
// 当前文件模块为 m1.js
// 向外按需导出变量 s1
export let s1 = 'aaa';
// 向外按需导出变量 s2
export let s2 = 'ccc';
// 向外按需导出方法 say
export function say = function() {
};
// 导入模块成员
import {
s1, s2 as ss2, say } from './m1.js';
console.log(s1); // 打印输出 aaa
console.log(ss2); // 打印输出 ccc
console.log(say); // 打印输出 [Function: say]
注：各モジュールでは、オンデマンドで複数のエクスポートを使用できます
2.3モジュールコードを直接インポートして実行する
特定のモジュールでコードを実行するだけで、モジュールの公開メンバーを取得する必要がない場合もあります。このとき、モジュールコードを直接インポートして実行できます。
// 当前文件模块为 m2.js
// 在当前模块中执行一个 for 循环操作
for (let i = 0; i < 3; i++) {
console.log(i);
}
// 直接导入并执行模块代码
import './m2.js'