詳解webpack babel的配置

更新時(shí)間：2018年01月09日 10:18:57 作者：饑人谷_林

本篇文章主要介紹了詳解webpack babel的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Babel是什么

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

使用下一代的javascript（ES6，ES7,……）代碼，即使當(dāng)前瀏覽器沒有完成支持；
使用基于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

首先 babel-polyfill 是對(duì)所有的API進(jìn)行全局設(shè)置。并且會(huì)污染全局變量。
babel-runtime 需要對(duì)你需要的API，如：Object.assign()。會(huì)先require()
babel-plugin-transform-runtime 最推薦。它不需要require()也不會(huì)全局污染，并且，更厲害的是它是按需打包，全自動(dòng)。

開始

/**** 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"]
}

presets能夠解決哪些語法。 package

babel-plugin-transform-runtime能夠解決哪些語法。 package

其他。更多

最后：babel看上去好像要配置很多，其實(shí)經(jīng)過官方的一頓簡(jiǎn)化之后需要的并沒有那么繁瑣。

github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼
本篇文章主要介紹了js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法，分別是處理異步回調(diào)、多個(gè)異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件的方法
這篇文章主要介紹了如何在?JavaScript?中使用SpreadJS導(dǎo)入和導(dǎo)出?Excel?文件,本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Popup對(duì)象實(shí)現(xiàn)右鍵菜單
Popup對(duì)象實(shí)現(xiàn)右鍵菜單...
2006-09-09
Javascript中for循環(huán)語句的幾種寫法總結(jié)對(duì)比
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的,javascript中for循環(huán)也是非常常用的,下面這篇文章主要介紹了Javascript中for循環(huán)的幾種寫法,需要的朋友可以參考借鑒，一起來看看吧。
2017-01-01
JS+Canvas實(shí)現(xiàn)自定義頭像功能
本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實(shí)現(xiàn)自定義頭像功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定的幫助，感興趣的小伙伴可以了解一下
2022-06-06
webstorm調(diào)試uniapp程序的簡(jiǎn)單步驟記錄
這篇文章主要給大家介紹了關(guān)于webstorm調(diào)試uniapp程序的簡(jiǎn)單步驟,文中通過圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用webstorm具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
script標(biāo)簽屬性type與language使用選擇
很多使用javascript的朋友都有著這樣一個(gè)問題:script標(biāo)簽屬性type與language使用應(yīng)如何選擇，為解決此疑惑，本文詳細(xì)整理了一下，需要的朋友可以參考下
2012-12-12