betacode

Руководство ECMAScript Module

  1. ES Module
  2. Синтаксисы ES Import
  3. NodeJS - CommonJS Module
  4. ES6 Module в NodeJS
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- ES Module

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

2- Синтаксисы ES Import

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

3- NodeJS - CommonJS Module

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: 

Hello Everybody
Goodbye!
Hello Tom
Goodbye Tom

4- ES6 Module в 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
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.