Руководство 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
