webpack babel 関連の設定の詳細な解釈 (詳細なチュートリアル)

この記事では主に webpack babel の詳細な構成を紹介し、参考にしていきます。

Babel とは

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

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

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

まず、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におけるscssの関連設定の詳細な紹介

Vueでのプロジェクトコンポーネント開発(詳細なチュートリアル) )

webpack 複数エントリ ファイルのパッケージ化構成を実装する方法

JavaScript で多重継承を実装する方法

Wangwang オンライン カスタマー サービスの実装方法について

Web ページのマウス効果を実装する方法 (詳細)チュートリアル)

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