webpack babelの詳細な設定

この記事では主に webpack babel の詳細な構成を紹介します。編集者がそれを参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Babel とは

Babel は、JavaScript をコンパイルするためのプラットフォームです。その利点は、コンパイルを通じて次のことを達成できることです。

1. 次世代の JavaScript (ES6、ES7 など) コードを使用します。現在のブラウザが完全にサポートしていない場合でも、

2. React の JSX などの JavavScript ベースの拡張言語を使用します。 transform-runtime babel- preset-stage-2 -D

babel の使用について

まず第一に、babel-preset-es2015 は廃止されました。babel-preset-env を使用して置き換えることができます。後者は前者よりも優れており便利ですが、ここでは繰り返しません。 babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

まず第一に、babel-polyfill はすべての API のグローバル設定です。そして、それはグローバル変数を汚染します。

1. babel-runtime には、Object.assign() などの必要な API が必要です。最初に require() します

2. babel-plugin-transform-runtime が最も推奨されます。 require() を必要とせず、地球規模の汚染を引き起こしません。さらに、オンデマンドでパッケージ化され、完全に自動化されます。

3. スタート

/**** webpack.config.js ****/
// 在规则中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只处理src目录下面的。
  // 你也可以配置一条规则处理node_modules下面的。
  // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我，导致浏览器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段设定转码规则
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的环境，可选入： chrome, edge, 也可以node:6.5 ，node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin转码预设不起作用的内容如：Object.assign()等等
 "plugins": ["transform-runtime"]
}

どの文法をプリセットで解決できるか。 package

babel-plugin-transform-runtime はどのような構文を解決できますか?パッケージ

その他。 詳細

最後に: Babel は多くの設定を必要とするように見えますが、実際には、公式に簡素化された後はそれほど面倒ではありません。

関連する推奨事項:

Webpack、Babel、および React 開発環境のセットアップに関するチュートリアル

babel を使用して es6 構文を es5 に変換する簡単な方法

Webpack、Babel、および React に関する知識

以上がwebpack babelの詳細な設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。