Webpack prend-il en charge Es6 ?

webpack prend en charge es6. Webpack 2 prend en charge la syntaxe native du module ES6, ce qui signifie que les développeurs peuvent utiliser l'importation et l'exportation sans introduire d'outils supplémentaires comme Babel. Mais si vous utilisez d'autres fonctionnalités ES6+, vous devez toujours introduire l'outil babel.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Méthodes de module

---

Lorsque vous emballez votre application avec webpack, vous pouvez choisir parmi différents styles de syntaxe de module, notamment ES6, CommonJS et AMD.

Bien que webpack prenne en charge plusieurs syntaxes de modules, nous recommandons toujours d'utiliser une syntaxe cohérente autant que possible pour éviter certains comportements étranges et bugs. En fait, webpack permet de vérifier la cohérence de la syntaxe lorsque le fichier package.json le plus proche contient un champ « type » avec une valeur de « module » ou « commonjs ». Veuillez noter ceci avant de lire :

• Définissez "type": "module" pour .mjs ou .js dans package.json

  • CommonJS n'est pas autorisé. Par exemple, vous ne pouvez pas utiliser require, module .exports ou exports.

  • Lors de l'importation de fichiers, forcez l'écriture de l'extension, par exemple, vous devez utiliser import './src/App.mjs' au lieu d'importer './src/App' (vous pouvez définir la règle par .resolve.fullySpecified pour désactiver cette règle)

• Définissez "type": "commonjs" dans package.json pour .cjs ou .js

  • Ni l'import ni l'export ne sont disponibles

• Définissez "type": "module " pour .wasm dans package.json

  • Lors de l'introduction du fichier wasm, vous devez écrire l'extension de fichier

ES6 (recommandé)

---

webpack 2 prend en charge la syntaxe native du module ES6 signifie que vous pouvez utilisez l'importation et l'exportation sans introduire d'outils supplémentaires comme Babel. Mais notez que si vous utilisez d'autres fonctionnalités ES6+, vous devez toujours importer Babel. webpack prend en charge les méthodes suivantes :

import

Utilisez import pour importer statiquement un autre module exporté via export .

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Attention :

Le mot-clé ici est statique. Dans l'instruction d'importation standard, l'instruction module ne peut pas introduire d'autres modules de manière dynamique qui "ont une logique ou contiennent des variables". Plus d'informations sur l'importation et l'utilisation dynamique de import().

Vous introduisez également Data URI via import :

import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
import {
  number,
  fn,
} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

export

Exportez l'intégralité du module par défaut ou exportez le module nommé.

// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
};

import()

function(string path):Promisefunction(string path):Promise

动态的加载模块。调用 import 的之处，被视为分割点，意思是，被请求的模块和它引用的所有子模块，会分割到一个单独的 chunk 中。

Tip：

ES2015 Loader 规范 定义了 import() 方法，可以在运行时动态地加载 ES2015 模块。

if (module.hot) {
  import('lodash').then((_) => {
    // Do something with lodash (a.k.a '_')...
  });
}

Warning：

import() 特性依赖于内置的 Promise。如果想在低版本浏览器中使用 import()，记得使用像 es6-promise 或者 promise-polyfill 这样 polyfill 库，来预先填充(shim) Promise 环境。

import() 中的表达式

不能使用完全动态的 import 语句，例如 import(foo)。是因为 foo 可能是系统或项目中任何文件的任何路径。

import() 必须至少包含一些关于模块的路径信息。打包可以限定于一个特定的目录或文件集，以便于在使用动态表达式时 - 包括可能在 import() 调用中请求的每个模块。例如， import(`./locale/${language}.json`) 会把 .locale 目录中的每个 .json 文件打包到新的 chunk 中。在运行时，计算完变量 language 后，就可以使用像 english.json 或 german.json 的任何文件。

// 想象我们有一个从 cookies 或其他存储中获取语言的方法
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});

Tip：

使用 webpackInclude and webpackExclude 选项可让你添加正则表达式模式，以减少 webpack 打包导入的文件数量。

Magic Comments

内联注释使这一特性得以实现。通过在 import 中添加注释，我们可以进行诸如给 chunk 命名或选择不同模式的操作。

// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  'module'
);

// 多个可能的目标
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

import(/* webpackIgnore: true */ 'ignored-module.js');

webpackIgnore

Module de chargement dynamique. Le point où l'importation est appelée est considéré comme un point de partage, ce qui signifie que le module demandé et tous les sous-modules auxquels il fait référence seront divisés en un seul bloc.

Astuce :

La spécification ES2015 Loader définit la méthode import(), qui peut charger dynamiquement les modules ES2015 au moment de l'exécution. 🎜🎜rrreee🎜🎜Attention : La fonctionnalité 🎜🎜import() repose sur les promesses intégrées. Si vous souhaitez utiliser import() dans des navigateurs plus anciens, n'oubliez pas d'utiliser une bibliothèque polyfill comme es6-promise ou promise-polyfill pour pré-remplir (shim) l'environnement Promise. Les expressions dans 🎜🎜🎜🎜🎜import() 🎜🎜🎜🎜 ne peuvent pas utiliser d'instructions d'importation entièrement dynamiques, telles que import(foo). c'est parce que foo peut être n'importe quel chemin vers n'importe quel fichier de votre système ou projet. 🎜🎜import() doit contenir au moins quelques informations de chemin sur le module. Le packaging peut être limité à un répertoire ou un ensemble de fichiers spécifique, de sorte que lors de l'utilisation d'expressions dynamiques, chaque module pouvant être demandé dans un appel import() soit inclus. Par exemple, import(`./locale/${langue}.json`) regroupera chaque fichier .json du répertoire .locale dans un nouveau morceau. Au moment de l'exécution, une fois la langue variable évaluée, n'importe quel fichier comme english.json ou german.json peut être utilisé. 🎜rrreee🎜🎜Astuce : 🎜🎜L'utilisation des options webpackInclude et webpackExclude vous permet d'ajouter des modèles d'expression régulière pour réduire le nombre de fichiers importés par webpack. 🎜🎜🎜🎜🎜Commentaires magiques🎜🎜🎜🎜Les commentaires en ligne rendent cette fonctionnalité possible. En ajoutant des commentaires à l'importation, nous pouvons faire des choses comme nommer le morceau ou sélectionner un mode différent. 🎜rrreeerrreee🎜webpackIgnore : lorsqu'il est défini sur true, désactive l'analyse d'importation dynamique. 🎜🎜🎜Avertissement : 🎜🎜Remarque : définir webpackIgnore sur true n'effectuera pas de fractionnement du code. 🎜

webpackChunkName : Le nom du nouveau chunk. À partir de webpack 2.6.0, les espaces réservés [index] et [request] prennent respectivement en charge les nombres incrémentés ou les noms de fichiers analysés réels. Après avoir ajouté cette annotation, les morceaux individuels qui nous seront donnés seront nommés [my-chunk-name].js au lieu de [id].js. webpackChunkName: 新 chunk 的名称。 从 webpack 2.6.0 开始，占位符 [index] 和 [request] 分别支持递增的数字或实际的解析文件名。 添加此注释后，将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

webpackMode：从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入。支持以下选项：

• 'lazy' (默认值)：为每个 import() 导入的模块生成一个可延迟加载（lazy-loadable）的 chunk。

• 'lazy-once'：生成一个可以满足所有 import() 调用的单个可延迟加载（lazy-loadable）的 chunk。此 chunk 将在第一次 import() 时调用时获取，随后的 import() 则使用相同的网络响应。注意，这种模式仅在部分动态语句中有意义，例如 import(`./locales/${language}.json`)，其中可能含有多个被请求的模块路径。

• 'eager'：不会生成额外的 chunk。所有的模块都被当前的 chunk 引入，并且没有额外的网络请求。但是仍会返回一个 resolved 状态的 Promise。与静态导入相比，在调用 import() 完成之前，该模块不会被执行。

• 'weak'：尝试加载模块，如果该模块函数已经以其他方式加载，（即另一个 chunk 导入过此模块，或包含模块的脚本被加载）。仍会返回 Promise， 但是只有在客户端上已经有该 chunk 时才会成功解析。如果该模块不可用，则返回 rejected 状态的 Promise，且网络请求永远都不会执行。当需要的 chunks 始终在（嵌入在页面中的）初始请求中手动提供，而不是在应用程序导航在最初没有提供的模块导入的情况下触发，这对于通用渲染（SSR）是非常有用的。

webpackPrefetch：告诉浏览器将来可能需要该资源来进行某些导航跳转。

webpackPreload：告诉浏览器在当前导航期间可能需要该资源。

webpackInclude：在导入解析（import resolution）过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包。

webpackExclude：在导入解析（import resolution）过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包。

webpackExports

webpackMode : à partir de webpack 2.6.0, vous pouvez spécifier différents modes pour analyser les importations dynamiques. Les options suivantes sont prises en charge :

• 'lazy' (par défaut) : Générez-en une pour chaque module importé import() Lazy -morceaux chargeables.
• 'lazy-once' : Générez un seul morceau chargeable paresseux qui peut satisfaire tous les appels import(). Ce morceau sera obtenu lors du premier appel import(), et les import() suivants utiliseront la même réponse réseau. Notez que ce mode n'a de sens que dans certaines instructions dynamiques, telles que import(`./locales/${langue}.json`), qui peuvent contenir plusieurs chemins de module demandés.
• 'eager' : Aucun morceau supplémentaire ne sera généré. Tous les modules sont importés par le bloc actuel et aucune demande réseau supplémentaire n'est effectuée. Cependant, une promesse à l’état résolu sera toujours renvoyée. Contrairement aux importations statiques, le module ne sera exécuté qu'une fois l'appel à import() terminé. 🎜
• 🎜'weak' : Essayez de charger le module si la fonction du module a été chargée d'une autre manière (c'est-à-dire qu'un autre morceau a importé ce module, ou le script contenant le module a été chargé). Une promesse sera toujours renvoyée, mais ne sera résolue avec succès que si le fragment est déjà disponible sur le client. Si le module n'est pas disponible, une promesse rejetée est renvoyée et la requête réseau n'est jamais exécutée. Ceci est utile pour le rendu universel (SSR) lorsque les morceaux requis sont toujours fournis manuellement dans la requête initiale (intégrés dans la page), plutôt que lorsque la navigation dans l'application est déclenchée sur une importation de module qui n'était pas initialement fournie. 🎜

🎜webpackPrefetch : indiquez au navigateur que cette ressource pourrait être nécessaire pour certains sauts de navigation dans le futur. 🎜🎜webpackPreload : indique au navigateur que la ressource peut être nécessaire lors de la navigation en cours. 🎜🎜webpackInclude : expression régulière utilisée pour la correspondance lors de la résolution de l'importation. Seuls les modules correspondants seront emballés. 🎜🎜webpackExclude : expression régulière utilisée pour la correspondance lors de la résolution de l'importation. Tous les modules correspondants ne seront pas empaquetés. 🎜🎜webpackExports : dites à webpack de créer uniquement des modules dynamiques import() avec les exportations spécifiées. Cela peut réduire la taille des morceaux. Disponible à partir du webpack 5.0.0-beta.18. 🎜🎜【Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜】🎜🎜

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!