詳解webpack babel的配置
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)化之后需要的并沒有那么繁瑣。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了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)右鍵菜單...2006-09-09
Javascript中for循環(huán)語句的幾種寫法總結(jié)對(duì)比
如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的,javascript中for循環(huán)也是非常常用的,下面這篇文章主要介紹了Javascript中for循環(huán)的幾種寫法,需要的朋友可以參考借鑒，一起來看看吧。2017-01-01
本文主要為大家詳細(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