ホームページ > 記事 > ウェブフロントエンド > webpack babelの詳細な設定
この記事では主に webpack babel の詳細な構成を紹介します。編集者がそれを参考にさせていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
Babel とは
Babel は、JavaScript をコンパイルするためのプラットフォームです。その利点は、コンパイルを通じて次のことを達成できることです。
次世代の JavaScript (ES6、ES7 など) コードを使用します。現在のブラウザが完全にサポートしていない場合でも、
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 のグローバル設定です。そして、それはグローバル変数を汚染します。
babel-runtime には、Object.assign() などの必要な API が必要です。最初に require() します
babel-plugin-transform-runtime が最も推奨されます。 require() を必要とせず、地球規模の汚染を引き起こしません。さらに、オンデマンドでパッケージ化され、完全に自動化されます。
スタート
/**** 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 サイトの他の関連記事を参照してください。