Comprendre les modules ES6

MODULE ES6: Solution modulaire pour JavaScript moderne

Cet article explore les modules ES6 et montre comment les utiliser à l'aide d'un traducteur. Presque toutes les langues ont le concept de modules - un moyen d'inclure des fonctions déclarées dans un autre fichier. En règle générale, les développeurs créent une base de code emballée qui gère les tâches connexes. La bibliothèque peut être référencée par une application ou un autre module. Les avantages sont:

1. Le code peut être divisé en fichiers plus petits et autonomes.
2. Le même module peut être partagé entre un nombre d'applications.
3. Idéalement, les modules n'ont pas besoin d'être vérifiés par d'autres développeurs car ils se sont révélés efficaces.
4. Le code qui fait référence au module sait qu'il s'agit d'une dépendance. Si le fichier du module est modifié ou déplacé, le problème apparaîtra immédiatement.
5. Le code du module (généralement) aide à éliminer les conflits de dénomination. La fonction x () dans le module 1 n'influence pas avec la fonction x () dans le module 2. Vous pouvez utiliser des options telles que l'espace de noms pour modifier les appels vers module1.x () et module2.x ().

Où sont les modules en JavaScript?

Quiconque a commencé le développement Web il y a quelques années serait surpris de constater qu'il n'y a pas de concept de modules en JavaScript. Il est impossible de référencer directement ou d'inclure un fichier JavaScript dans un autre fichier. Par conséquent, les développeurs se tournent vers d'autres méthodes.

divers html <p> </p> <ul></ul>

<🎜>

HTML 可以使用多个 <script> 标签加载任意数量的 JavaScript 文件：

<script src="lib1.js"></script> doivent être servis à l'aide de MIME Type Application / JavaScript. La plupart des serveurs le font automatiquement, mais faites attention aux scripts générés dynamiquement ou aux fichiers .mjs (voir la section Node.js ci-dessous). <script src="lib2.js"></script> <script src="core.js"></script> régulier
<script>console.log('inline code');</script> <script></code> 标签问题的一种方法是将所有 JavaScript 文件合并成一个大型文件。这解决了一些性能和依赖项管理问题，但可能会导致手动构建和测试步骤。</p>
<p><strong>模块加载器</strong></p>
<p>RequireJS 和 SystemJS 等系统提供了一个库，用于在运行时加载和命名其他 JavaScript 库。模块在需要时使用 Ajax 方法加载。这些系统有所帮助，但对于大型代码库或添加标准 <code><script></code> 标签的网站来说，可能会变得复杂。</p>
<p><strong>模块打包器、预处理器和转译器</strong></p>
<p>打包器引入了编译步骤，以便在构建时生成 JavaScript 代码。代码经过处理以包含依赖项并生成单个 ES5 跨浏览器兼容的合并文件。流行的选项包括 Babel、Browserify、webpack 以及更通用的任务运行器，如 Grunt 和 Gulp。</p>
<p>JavaScript 构建过程需要一些努力，但也有好处：</p>
<ul>
<li>处理是自动化的，因此人为错误的可能性较小。</li>
<li>进一步的处理可以整理代码、删除调试命令、缩小结果文件等。</li>
<li>转译允许您使用替代语法，如 TypeScript 或 CoffeeScript。</li>
</ul>
<p><strong>ES6 模块</strong></p>
<p>上述选项引入了各种相互竞争的模块定义格式。广泛采用的语法包括：</p>
<ul>
<li>CommonJS——Node.js 中使用的 module.exports 和 require 语法</li>
<li>异步模块定义 (AMD)</li>
<li>通用模块定义 (UMD)</li>
</ul>
<p>因此，在 ES6 (ES2015) 中提出了单一的原生模块标准。</p>
<p>ES6 模块内部的所有内容默认情况下都是私有的，并且在严格模式下运行（不需要“use strict”）。公共变量、函数和类使用 export 导出。例如：</p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">// lib.js
export const PI = 3.1415926;
export function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}
export function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}
// 私有函数
function log(...msg) {
  console.log(...msg);
}

或者，可以使用单个 export 语句。例如：

// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

export { PI, sum, mult };

然后使用 import 将模块中的项目导入到另一个脚本或模块中：

// main.js
import { sum } from './lib.js';

console.log(sum(1, 2, 3, 4)); // 10

在这种情况下，lib.js 与 main.js 在同一个文件夹中。可以使用绝对文件引用（以 / 开头）、相对文件引用（以 ./ 或 ../ 开头）或完整 URL。可以一次导入多个项目：

import { sum, mult } from './lib.js';

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24

并且可以为导入指定别名以解决命名冲突：

import { sum as addAll, mult as multiplyAll } from './lib.js';

console.log(addAll(1, 2, 3, 4));      // 10
console.log(multiplyAll(1, 2, 3, 4)); // 24

最后，可以通过提供命名空间来导入所有公共项目：

import * as lib from './lib.js';

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24

在浏览器中使用 ES6 模块

在撰写本文时，ES6 模块受 Chromium 系浏览器 (v63+)、Safari 11+ 和 Edge 16+ 支持。Firefox 支持将在版本 60 中到来（在 v58+ 中位于 about:config 标志之后）。使用模块的脚本必须通过在 <script> 标签中设置 type="module" 属性来加载。例如：

 Rollback du module  <script> 标签可以获取其他域上的脚本，但模块是使用跨域资源共享 (CORS) 获取的。因此，不同域上的模块必须设置适当的 HTTP 标头，例如 Access-Control-Allow-Origin: *。

最后，除非在 <script> 标签中添加 crossorigin="use-credentials" 属性并且响应包含标头 Access-Control-Allow-Credentials: true，否则模块不会发送 Cookie 或其他标头凭据。
模块执行被延迟
<script> 标签的 defer 属性会延迟脚本执行，直到文档加载并解析完毕。模块（包括内联脚本）默认情况下会延迟。示例：


 Les navigateurs qui ne prennent pas en charge les modules n'exécuteront pas le script type = "module". Vous pouvez utiliser la propriété Nomodule pour fournir un script de secours qui est ignoré par le navigateur compatible au module. Par exemple: 
<🎜>
Copier après la connexion
  devriez-vous utiliser des modules dans votre navigateur?  
 Le support du navigateur augmente, mais il peut être trop tôt pour passer au module ES6. Actuellement, il est préférable d'utiliser un packer de module pour créer un script qui fonctionne n'importe où. 
  Utilisation du module ES6 dans node.js  
 Node.js a été publié en 2009, il était inimaginable qu'aucun module n'ait été fourni à tout moment. CommonJS est utilisé, ce qui signifie que le NPM du gestionnaire de package de nœuds peut être développé. Depuis lors, l'utilisation a augmenté de façon exponentielle. Le module CommonJS est codé d'une manière similaire au module ES2015. Utilisez module.exports au lieu de l'exportation: 
<🎜>
<🎜>
Copier après la connexion
 Utiliser l'exigence (plutôt que l'importation) pour importer ce module dans un autre script ou module: 
// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };
Copier après la connexion
 exiger peut également importer tous les projets: 
const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24
Copier après la connexion
 Donc, il est facile d'implémenter les modules ES6 dans Node.js, non?  pas correct . Le module ES6 est situé après les drapeaux dans Node.js 9.8.0 et ne sera pas entièrement implémenté avant au moins la version 10. Bien que les modules CommonJS et ES6 aient une syntaxe similaire, ils fonctionnent de manière fondamentalement différente: 

Les modules 
 ES6 sont pré-payés avant d'exécuter le code pour analyser d'autres importations. 
 Le module CommonJS charge les dépendances à la demande lors de l'exécution du code. 

 Dans l'exemple ci-dessus, cela ne fait aucune différence, mais considérez le code du module ES2015 suivant: 
const lib = require('./lib.js');

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24
Copier après la connexion
 Sortie d'ES2015: 
// ES2015 模块

// ---------------------------------
// one.js
console.log('running one.js');
import { hello } from './two.js';
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
export const hello = 'Hello from two.js';
Copier après la connexion
 Code similaire écrit en utilisant CommonJS: 
<code>running two.js
running one.js
Hello from two.js</code>
Copier après la connexion
 Sortie de CommonJS: 
// CommonJS 模块

// ---------------------------------
// one.js
console.log('running one.js');
const hello = require('./two.js');
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
module.exports = 'Hello from two.js';
Copier après la connexion
 L'ordre d'exécution peut être critique dans certaines applications, que se passe-t-il si vous mélangez les modules ES2015 et CommonJS dans le même fichier? Pour résoudre ce problème, Node.js permet uniquement l'utilisation de modules ES6 dans des fichiers avec l'extension .mjs. Les fichiers avec l'extension .js seront par défaut à CommonJS. Il s'agit d'une option simple qui supprime la majeure partie de la complexité et devrait aider avec l'éditeur de code et l'inspecteur de code. 
  devriez-vous utiliser le module ES6 dans Node.js?  
Le module 
 ES6 n'est utile que dans Node.js v10 et plus tard (publié en avril 2018). Il est peu probable que la conversion d'un projet existant apporte tout avantage et rendra l'application incompatible avec les versions antérieures de Node.js. Pour les nouveaux projets, le module ES6 fournit une alternative à CommonJS. La syntaxe est la même que le codage client et peut fournir un moyen plus facile de JavaScript isomorphe, qui peut s'exécuter sur un navigateur ou un serveur. 
  Module Melee  
 Le système de module JavaScript standardisé a mis des années à émerger et a pris plus de temps à mettre en œuvre, mais le problème a été corrigé. À partir de la mi-2018, tous les navigateurs traditionnels et Node.js prennent en charge le module ES6, bien qu'un délai de commutation soit attendu lorsque tout le monde améliore. Apprenez les modules ES6 aujourd'hui pour bénéficier de votre développement JavaScript demain. 
  FAQ sur les modules ES6 (FAQ)  
  (La partie FAQ du document d'origine est omise ici car le texte intégral a été entièrement pseudo-originalisé)  
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!