Unterstützt Webpack es6?-Front-End-Fragen und Antworten-php.cn

Webpack unterstützt es6. Webpack 2 unterstützt die native ES6-Modulsyntax, was bedeutet, dass Entwickler Import und Export verwenden können, ohne zusätzliche Tools wie Babel einführen zu müssen. Wenn Sie jedoch andere ES6+-Funktionen verwenden, müssen Sie dennoch das Babel-Tool einführen.

Unterstützt Webpack es6?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Modulmethoden

Beim Packen Ihrer Anwendung mit Webpack können Sie aus verschiedenen Modulsyntaxstilen wählen, darunter ES6, CommonJS und AMD.

Obwohl Webpack mehrere Modulsyntaxen unterstützt, empfehlen wir dennoch, so weit wie möglich eine konsistente Syntax zu verwenden, um seltsame Verhaltensweisen und Fehler zu vermeiden. Tatsächlich ermöglicht Webpack die Überprüfung der Syntaxkonsistenz, wenn die nächstgelegene package.json-Datei ein „type“-Feld mit dem Wert „module“ oder „commonjs“ enthält. Bitte beachten Sie dies vor dem Lesen:

Setzen Sie „type“: „module“ für .mjs oder .js in package.json
- CommonJS ist beispielsweise nicht zulässig
- Wenn Sie beim Importieren von Dateien das Schreiben einer Erweiterung erzwingen, sollten Sie beispielsweise import './src/App.mjs' anstelle von import './src/App' verwenden (Sie können Rule by .resolve.fullySpecified auf „Deaktivieren“ setzen Diese Regel)
Setzen Sie „Typ“: „commonjs“ in package.json für .cjs oder .js
- Weder Import noch Export sind verfügbar
Setzen Sie „Typ“: „Modul“. " für .wasm in package.json
- Beim Einführen der WASM-Datei müssen Sie die Dateierweiterung schreiben

ES6 (empfohlen)

Webpack 2 unterstützt die native ES6-Modulsyntax, was bedeutet, dass Sie dies können Verwenden Sie Import und Export, ohne zusätzliche Tools wie Babel einzuführen. Beachten Sie jedoch, dass Sie Babel trotzdem importieren müssen, wenn Sie andere ES6+-Funktionen verwenden. Webpack unterstützt die folgenden Methoden:

import

Verwenden Sie import, um ein anderes über export exportiertes Modul statisch zu importieren.

import MyModule from &#39;./my-module.js&#39;;
import { NamedExport } from &#39;./other-module.js&#39;;

Nach dem Login kopieren

Warnung:
Das Schlüsselwort hier ist statisch. In der Standard-Importanweisung kann die Modulanweisung andere Module nicht auf dynamische Weise einführen, die „über Logik verfügt oder Variablen enthält“. Weitere Informationen zum Import und zur dynamischen Verwendung von import().

Sie führen Daten-URI auch über den Import ein:

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

Nach dem Login kopieren

export

Exportieren Sie standardmäßig das gesamte Modul oder exportieren Sie das benannte Modul.

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

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

Nach dem Login kopieren

import()

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

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

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

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

Nach dem Login kopieren

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
});

Nach dem Login kopieren

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

Magic Comments

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

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

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

Nach dem Login kopieren

import(/* webpackIgnore: true */ &#39;ignored-module.js&#39;);

Nach dem Login kopieren

webpackIgnore

Dynamisches Lademodul. Der Punkt, an dem der Import aufgerufen wird, wird als Teilungspunkt betrachtet, was bedeutet, dass das angeforderte Modul und alle Submodule, auf die es verweist, in einen einzigen Block aufgeteilt werden.

Tipp:
Die ES2015-Loader-Spezifikation definiert die Methode import(), die ES2015-Module zur Laufzeit dynamisch laden kann. 🎜🎜rrreee🎜🎜Warnung: Die Funktion 🎜🎜import() basiert auf integrierten Versprechen. Wenn Sie import() in älteren Browsern verwenden möchten, denken Sie daran, eine Polyfill-Bibliothek wie es6-promise oder Promise-Polyfill zu verwenden, um die Promise-Umgebung vorab zu füllen (shim). Ausdrücke in 🎜🎜🎜🎜🎜import() 🎜🎜🎜🎜 können keine vollständig dynamischen Importanweisungen wie import(foo) verwenden. liegt daran, dass foo ein beliebiger Pfad zu einer beliebigen Datei in Ihrem System oder Projekt sein kann. 🎜🎜import() muss mindestens einige Pfadinformationen zum Modul enthalten. Das Packen kann auf ein bestimmtes Verzeichnis oder einen bestimmten Dateisatz beschränkt werden, sodass bei Verwendung dynamischer Ausdrücke jedes Modul enthalten ist, das möglicherweise in einem import()-Aufruf angefordert wird. Beispielsweise packt import(`./locale/${sprache}.json`) jede .json-Datei im .locale-Verzeichnis in einen neuen Block. Zur Laufzeit kann nach der Auswertung der Variablensprache jede beliebige Datei wie english.json oder german.json verwendet werden. 🎜rrreee🎜🎜Tipp: 🎜🎜Mit den Optionen webpackInclude und webpackExclude können Sie reguläre Ausdrucksmuster hinzufügen, um die Anzahl der von Webpack importierten Dateien zu reduzieren. 🎜🎜🎜🎜🎜Magische Kommentare🎜🎜🎜🎜Inline-Kommentare machen diese Funktion möglich. Durch das Hinzufügen von Kommentaren zum Import können wir beispielsweise den Block benennen oder einen anderen Modus auswählen. 🎜rrreeerrreee🎜webpackIgnore: Wenn auf true gesetzt, wird die dynamische Importanalyse deaktiviert. 🎜🎜🎜Warnung: 🎜🎜Hinweis: Wenn Sie webpackIgnore auf true setzen, wird keine Codeaufteilung durchgeführt. 🎜

webpackChunkName: Der Name des neuen Chunks. Ab Webpack 2.6.0 unterstützen die Platzhalter [index] und [request] inkrementierte Zahlen bzw. tatsächlich geparste Dateinamen. Nach dem Hinzufügen dieser Anmerkung wird der separate Chunk, der uns übergeben wird, [my-chunk-name].js statt [id].js“ genannt. 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: Ab Webpack 2.6.0 können Sie verschiedene Modi zum Parsen dynamischer Importe angeben. Die folgenden Optionen werden unterstützt:

'lazy' (Standard): Generieren Sie für jedes importierte import()-Modul ein Lazy -ladbare Chunks.
'lazy-once': Generieren Sie einen einzelnen Lazy-Loadable-Block, der alle import()-Aufrufe erfüllen kann. Dieser Block wird beim ersten import()-Aufruf abgerufen und nachfolgende import()s verwenden dieselbe Netzwerkantwort. Beachten Sie, dass dieser Modus nur in einigen dynamischen Anweisungen sinnvoll ist, z. B. import(`./locales/${sprache}.json`), die mehrere angeforderte Modulpfade enthalten können.
'eager': Es werden keine zusätzlichen Chunks generiert. Alle Module werden vom aktuellen Block importiert und es werden keine zusätzlichen Netzwerkanforderungen gestellt. Ein Versprechen im gelösten Zustand wird jedoch weiterhin zurückgegeben. Im Gegensatz zu statischen Importen wird das Modul erst ausgeführt, wenn der Aufruf von import() abgeschlossen ist. 🎜
🎜'weak': Versuchen Sie, das Modul zu laden, wenn die Modulfunktion auf andere Weise geladen wurde (d. h. ein anderer Chunk hat dieses Modul oder das enthaltende Skript importiert). das Modul wurde geladen). Ein Promise wird weiterhin zurückgegeben, aber nur dann erfolgreich aufgelöst, wenn der Block bereits auf dem Client verfügbar ist. Wenn das Modul nicht verfügbar ist, wird ein abgelehntes Promise zurückgegeben und die Netzwerkanforderung wird nie ausgeführt. Dies ist für Universal Rendering (SSR) nützlich, wenn die erforderlichen Blöcke immer manuell in der ersten Anfrage bereitgestellt werden (eingebettet in die Seite) und nicht, wenn die Anwendungsnavigation durch einen Modulimport ausgelöst wird, der ursprünglich nicht bereitgestellt wurde. 🎜

🎜webpackPrefetch: Teilen Sie dem Browser mit, dass diese Ressource möglicherweise für bestimmte Navigationssprünge in der Zukunft benötigt wird. 🎜🎜webpackPreload: Teilt dem Browser mit, dass die Ressource möglicherweise während der aktuellen Navigation benötigt wird. 🎜🎜webpackInclude: Regulärer Ausdruck, der für den Abgleich während der Importauflösung verwendet wird. Es werden nur passende Module verpackt. 🎜🎜webpackExclude: Regulärer Ausdruck, der für den Abgleich während der Importauflösung verwendet wird. Alle passenden Module werden nicht verpackt. 🎜🎜webpackExports: Weist Webpack an, nur dynamische import()-Module mit angegebenen Exporten zu erstellen. Es kann die Blockgröße reduzieren. Verfügbar ab Webpack 5.0.0-beta.18. 🎜🎜【Verwandte Empfehlungen: 🎜Javascript-Lern-Tutorial🎜🎜】🎜🎜

Das obige ist der detaillierte Inhalt vonUnterstützt Webpack es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!