webpackはes6をサポートしていますか?

Webpack は es6 をサポートします。 Webpack 2 はネイティブ ES6 モジュール構文をサポートしているため、開発者は babel などの追加ツールを導入せずにインポートとエクスポートを使用できます。ただし、他の ES6 機能を使用する場合も、babel ツールを導入する必要があります。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

モジュール メソッド

---

Webpack を使用してアプリケーションをパッケージ化する場合、ES6、CommonJS、AMD などのさまざまなモジュール構文スタイルから選択できます。

webpack は複数のモジュール構文をサポートしていますが、奇妙な動作やバグを避けるために、可能な限り一貫した構文を使用することをお勧めします。実際、webpack は、最も近い package.json ファイルに「module」または「commonjs」の値を持つ「type」フィールドが含まれている場合に、構文の一貫性チェックを有効にします。読む前に次の点に注意してください:

• package.json の .mjs または .js に "type": "module" を設定します

  • CommonJS は許可されていません。たとえば、require、module.exports、exports は使用できません。

  • ファイルをインポートするときは、拡張子を記述することが必須です。たとえば、import を使用する必要があります。 import './src/App' の代わりに './src/App.mjs' (Rule.resolve.fullSpecified を設定することでこのルールを無効にできます)

• #.cjs または .js の package.json で "type": "commonjs" を設定します。

  • インポートとエクスポートの両方は使用できません

• package.json の .wasm に "type": "module" を設定します

  • wasm ファイルを導入するときは、ファイル拡張子を記述する必要があります

ES6 (推奨)

---

webpack 2 はネイティブ ES6 モジュール構文をサポートしています。つまり、追加の構文を導入する必要はありません。 babel などのツールでは、インポートとエクスポートを使用できます。ただし、他の ES6 機能を使用する場合でも、babel を導入する必要があることに注意してください。 webpack は次のメソッドをサポートしています。

#import

## import を使用して、エクスポートを通じてエクスポートされた別のモジュールを静的にインポートします。

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

警告:

ここでのキーワードは静的です。標準の import ステートメントでは、module ステートメントは、「ロジックがある、または変数が含まれる」他のモジュールを動的に導入することはできません。インポートと import() の動的使用法に関する詳細情報。

インポートを通じてデータ URI を導入することもできます:

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

export

モジュール全体または名前付きをエクスポートします。デフォルトのエクスポートモジュール。

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

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

import()

function(string path):Promise

動的読み込みモジュール。 import が呼び出されるポイントは分割ポイントとみなされます。これは、要求されたモジュールとそれが参照するすべてのサブモジュールが 1 つのチャンクに分割されることを意味します。

ヒント:

ES2015 ローダーの仕様では、実行時に ES2015 モジュールを動的にロードするための import() メソッドが定義されています。

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

警告:

import() 機能は、組み込みの Promise に依存しています。古いブラウザで import() を使用する場合は、es6-promise や Promise-polyfill などの Polyfill ライブラリを使用して、Promise 環境を事前に設定 (シム) することを忘れないでください。

import() の式

では、import(foo) などの完全に動的なインポート ステートメントを使用できません。 foo は、システムまたはプロジェクト内の任意のファイルへの任意のパスである可能性があるためです。

import() には、モジュールに関する少なくともいくつかのパス情報が含まれている必要があります。パッケージ化は特定のディレクトリまたはファイルのセットに制限できるため、動的式を使用する場合、import() 呼び出しで要求される可能性のあるすべてのモジュールが含まれます。たとえば、import(`./locale/${ language}.json`) は、.locale ディレクトリ内の各 .json ファイルを新しいチャンクにパッケージ化します。実行時、変数言語が評価された後、english.json や german.json などの任意のファイルを使用できます。

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

ヒント:

webpackInclude および webpackExclude オプションを使用すると、正規表現パターンを追加して、webpack によってインポートされるファイルの数を減らすことができます。

#マジック コメントインライン コメントにより、この機能が有効になります。インポートにコメントを追加することで、チャンクに名前を付けたり、別のモードを選択したりすることができます。

// 单个目标
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

: true に設定すると、動的インポート解析が無効になります。

警告:

注: webpackIgnore を true に設定すると、コード分割は実行されません。

webpackChunkName: 新しいチャンクの名前。 webpack 2.6.0 以降、プレースホルダー [index] と [request] はそれぞれ、増分番号または実際に解析されたファイル名をサポートします。このアノテーションを追加すると、与えられる個々のチャンクの名前は [id].js ではなく [my-chunk-name].js になります。

webpackMode: webpack 2.6.0 以降では、動的インポートを解析するために別のモードを指定できます。次のオプションがサポートされています:

• 'lazy' (デフォルト値): import() でインポートされたモジュールごとに遅延ロード可能なモジュールを生成します。

• 'lazy-once': すべての import() 呼び出しを満たすことができる単一の遅延ロード可能なチャンクを生成します。このチャンクは最初の import() 呼び出しで取得され、後続の import() では同じネットワーク応答が使用されます。このモードは、複数の要求されたモジュール パスを含む可能性がある import(`./locales/${ language}.json`) などの一部の動的ステートメントでのみ意味があることに注意してください。

• 'eager': 追加のチャンクは生成されません。すべてのモジュールは現在のチャンクによってインポートされ、追加のネットワーク要求は行われません。ただし、解決された状態の Promise は引き続き返されます。静的インポートとは対照的に、モジュールは import() の呼び出しが完了するまで実行されません。

• 'weak'

  : モジュール関数が他の方法でロードされている場合 (つまり、別のチャンクがこのモジュールをインポートしている場合)、モジュールのロードを試みます。またはロードされるモジュールスクリプトが含まれます)。 Promise は引き続き返されますが、チャンクがクライアント上ですでに使用可能な場合にのみ正常に解決されます。モジュールが利用できない場合は、拒否された Promise が返され、ネットワーク リクエストは実行されません。これは、最初に提供されていないモジュールのインポートでアプリケーション ナビゲーションがトリガーされる場合ではなく、必要なチャンクが常に最初のリクエスト (ページに埋め込まれている) で手動で提供される場合に、ユニバーサル レンダリング (SSR) で役立ちます。

webpackPrefetch

: 将来、特定のナビゲーション ジャンプにこのリソースが必要になる可能性があることをブラウザーに伝えます。

webpackPreload

: 現在のナビゲーション中にリソースが必要になる可能性があることをブラウザに伝えます。

webpackInclude

: インポート解決時の照合に使用される正規表現。一致するモジュールのみがパッケージ化されます。

webpackExclude

: インポート解決時の照合に使用される正規表現。一致するすべてのモジュールはパッケージ化されません。

webpackExports

: 指定されたエクスポートを持つ動的 import() モジュールのみを構築するように webpack に指示します。チャンクサイズを縮小できます。 webpack 5.0.0-beta.18 以降で利用可能です。

[関連する推奨事項: JavaScript 学習チュートリアル]

###

以上がwebpackはes6をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。