Руководство ECMAScript Module
View more Tutorials:
ECMAScript 6 представляет ES6 Module Syntax помогает программистам модулизировать свой код (modularize). Проще говоря, вы можете написать ваш код на отдельном файле. На данном файле вы можете экспортировать (export) нужные вещи в виде модулей (module), другие файлы могут импортировать (import) модули (module) того файла для использования.

Module и import/export являются отличной идеей для вашего легкого управления и поддержки кода в больших приложениях. Код, который вы пишете в защищенном файле, только то что вы экспортируете в виде модуля (module) может быть доступно из другого файла.
Для простоты, здесь я создаю 2 файла es6-module-file.js & es6-file1.js.
- es6-module-file.js: Данный файл определяет константы, функции. классы,... Некоторые были упакованы в одном module и экспортировали данный module.
- es6-file1.js: Является файлом импортирующим некоторые module файла es6-module-file.js для использования.

se6-module-file.js
// Constants const HELLO = "Hello Everybody"; const BYE = "Goodbye!"; // Private function (Do not export this function) function doSomething() { console.log("Do Something"); } // A Function let sayHello = function(name) { if(name) { console.log("Hello " + name); } else { console.log(HELLO); } } // A Function let sayGoodbye = function(name) { if(name) { console.log("Goodbye " + name); } else { console.log(BYE); } } // Export a Module export {HELLO, BYE, sayHello, sayGoodbye}; // Export as default Module. // IMPORTANT!!: Allow at most one 'default' export default {sayHello, sayGoodbye};
Файл es6-file1.js импортирует некоторые module файла es6-module-file.js:
es6-file1.js
// Import * import * as myModule from './es6-module-file.js'; console.log( myModule.HELLO ); // Hello Everybody console.log( myModule.BYE ); // Goodbye! myModule.sayHello("Tom") ; // Hello Tom myModule.sayGoodbye("Tom") ;// Goodbye Tom
Для теста примера, самое простое это создать файл HTML, например test1.html:
Примечание: Вы должны использовать <script type="module"> вместо <script type="text/javascript">.
es6-test1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Import/Export</title> <!-- IMPORTANT!! type = "module" --> <script type="module" src="es6-file1.js"></script> </head> <body> Show informations in the Console. </body> </html>
Вам нужно запустить es6-test1.html на HTTP Server, и вы можете увидеть результат на окне Console браузера. Примечение: ES6 Module не будет работать, если вы запустите файл HTML напрямую на браузере с schema file:///.

NodeJS!
Если вы получите ошибку ниже при запуске файла es6-file1.js trên NodeJS, вы можете просмотреть объяснение в конце данной статьи.C:\webexamples\node-ecmascript\module\es6-file1.js:2 import * as myModule from './es6-module-file.js'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:617:28) at Object.Module._extensions..js (module.js:664:10) at Module.load (module.js:566:32) at tryModuleLoad (module.js:506:12) at Function.Module._load (module.js:498:3) at Function.Module.runMain (module.js:694:10) at startup (bootstrap_node.js:204:16) at bootstrap_node.js:625:3
Import Syntaxes
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");
Пример:
es6-file1.js
// Syntax: import * as name from "Module-name or File-path"; import * as myModule from './es6-module-file.js'; console.log( myModule.HELLO ); // Hello Everybody console.log( myModule.BYE ); // Goodbye! myModule.sayHello("Tom") ; // Hello Tom myModule.sayGoodbye("Tom") ;// Goodbye Tom
Пример:
es6-file2.js
// Syntax: import { export1 , export2 } from "Module-name or File-path"; import {sayHello, HELLO} from './es6-module-file.js'; console.log( HELLO ); // Hello Everybody sayHello("Tom") ; // Hello Tom
Пример:
es6-file3.js
// Syntax: import { export as alias } from "Module-name or File-path"; import {sayHello as mySayHello, HELLO} from './es6-module-file.js'; console.log( HELLO ); // Hello Everybody mySayHello("Tom") ; // Hello Tom
Пример:
es6-file4.js
// Syntax: import { export as alias } from "Module-name or File-path"; import {sayHello as mySayHello, HELLO} from './es6-module-file.js'; console.log( HELLO ); // Hello Everybody mySayHello("Tom") ; // Hello Tom
Пример:
es6-file5.js
// Syntax: import defaultExport, * as name from "Module-name or File-path"; import myModule, {sayHello, HELLO} from './es6-module-file.js'; console.log( HELLO ); // Hello Everybody myModule.sayHello("Tom") ; // Hello Tom
NodeJS использует собственный синтаксис для экспорта и импорта Module, данный синтаксис известен под названием"CommonJS Module Syntax". Рассмотрим пример с данным синтаксисом:

nodejs-module-file.js
// Constants const HELLO = "Hello Everybody"; const BYE = "Goodbye!"; // Private function (Do not export this function) function doSomething() { console.log("Do Something"); } // A Function let sayHello = function(name) { if(name) { console.log("Hello " + name); } else { console.log(HELLO); } } // A Function let sayGoodbye = function(name) { if(name) { console.log("Goodbye " + name); } else { console.log(BYE); } } // Export a Module (CommonJS Module Syntax) module.exports = {HELLO, BYE, sayHello, sayGoodbye};
Файл nodejs-file1.js импортирует некоторые module файла nodejs-module-file.js:
nodejs-file1.js
// Import var myModule = require("./nodejs-module-file.js"); console.log( myModule.HELLO ); // Hello Everybody console.log( myModule.BYE ); // Goodbye! myModule.sayHello("Tom") ; // Hello Tom myModule.sayGoodbye("Tom") ;// Goodbye Tom
Запустите файл nodejs-file1.js напрямую в среде NodeJS:

Многие синтаксисы Module используются одновременно в Javascript, например CommonJS Module Syntax, ES6 Module Syntax,..
- NodeJS использует CommonJS Module Syntax для экспорта и импорта module. Точнее он использует ключевое слово module.exports/required() вместо export/import.
- ES6 Module Syntax использует ключевое слово export/import для экспорта и импорта module.
Несмотря на то, что ES6 Module Syntax представлен в версии ECMAScript6 (Выпущенный в 2015 году), но NodeJS версии 11 (Выпущенный в октябре 2018 года) еще не поддерживает данный синтаксис по умолчанию, поэтому при выполнении файла, Javascript использует ES Module Syntax на NodeJS и вы можете встретить подобную ошибку:
C:\webexamples\node-ecmascript\module\es6-file1.js:1 (function (exports, require, module, __filename, __dirname) { import { sayHello } from './es6-file1.js'; ^^^^^^ SyntaxError: Unexpected token import
Решение здесь это вам нужно переименовать файлы *.js в *.mjs (Module JS). Например здесь я создаю 2 файла mjs:

es6node-module-file.mjs
// Constants const HELLO = "Hello Everybody"; const BYE = "Goodbye!"; // Private function (Do not export this function) function doSomething() { console.log("Do Something"); } // A Function let sayHello = function(name) { if(name) { console.log("Hello " + name); } else { console.log(HELLO); } } // A Function let sayGoodbye = function(name) { if(name) { console.log("Goodbye " + name); } else { console.log(BYE); } } // Export a Module export {HELLO, BYE, sayHello, sayGoodbye};
es6node-file1.mjs
// Import * import * as myModule from './es6node-module-file.mjs'; console.log( myModule.HELLO ); // Hello Everybody console.log( myModule.BYE ); // Goodbye! myModule.sayHello("Tom") ; // Hello Tom myModule.sayGoodbye("Tom") ;// Goodbye Tom
Откройте окно CMD и CD в папку содержащую 2 файла выше и выполните следующую команду:
node --experimental-modules es6node-file1.mjs
