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

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、小程序設(shè)計(jì)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

Babel是什么

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

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

2. 使用基于JavvScript進(jìn)行擴(kuò)展語言，比如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進(jìn)行全局設(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：webpack中如何配置babel
鏈接分享：http://jinyejixie.com/article40/ijjgeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)