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

ES Module
Синтаксисы ES Import
NodeJS - CommonJS Module
ES6 Module в NodeJS

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

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

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

1. ES Module

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

3. NodeJS - CommonJS Module

4. ES6 Module в NodeJS

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи