webpack中如何配置babel

小編給大家分享一下webpack中如何配置babel，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Babel是什么

Babel是一個編譯JavaScript的平臺，它的強大之處表現(xiàn)在可以通過編譯幫你達到：

1. 使用下一代的javascript（ES6，ES7,……）代碼，即使當(dāng)前瀏覽器沒有完成支持；

2. 使用基于JavvScript進行擴展語言，比如React的JSX；

npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D

關(guān)于babel的使用

首先 babel-preset-es2015 已經(jīng)廢棄，你可以使用 babel-preset-env 來代替它，后者比前者更好的更方便，這里不在贅述。

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

1. 首先 babel-polyfill 是對所有的API進行全局設(shè)置。并且會污染全局變量。

2. babel-runtime 需要對你需要的API，如：Object.assign()。會先require()

3. babel-plugin-transform-runtime 最推薦。它不需要require()也不會全局污染，并且，更厲害的是它是按需打包，全自動。

開始

/**** webpack.config.js ****/
// 在規(guī)則中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只處理src目錄下面的。
  // 你也可以配置一條規(guī)則處理node_modules下面的。
  // 我記得swiper不知道哪一版本的直接把原來為編譯的es6的語法塞給我，導(dǎo)致瀏覽器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段設(shè)定轉(zhuǎn)碼規(guī)則
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的環(huán)境，可選入： chrome, edge, 也可以node:6.5 ，node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin轉(zhuǎn)碼預(yù)設(shè)不起作用的內(nèi)容如：Object.assign()等等
 "plugins": ["transform-runtime"]
}

以上是“webpack中如何配置babel”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！