詳解webpack babel的配置
更新時間：2018年01月09日 10:18:57 作者：饑人谷_林
本篇文章主要介紹了詳解webpack babel的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Babel是什么
Babel是一個編譯JavaScript的平臺，它的強大之處表現(xiàn)在可以通過編譯幫你達(dá)到：
- 使用下一代的javascript（ES6，ES7,……）代碼，即使當(dāng)前瀏覽器沒有完成支持；
- 使用基于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
- 首先 babel-polyfill 是對所有的API進行全局設(shè)置。并且會污染全局變量。
- babel-runtime 需要對你需要的API，如：Object.assign()。會先require()
- 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"]
}
presets能夠解決哪些語法。 package
babel-plugin-transform-runtime能夠解決哪些語法。 package
其他。 更多
最后：babel看上去好像要配置很多，其實經(jīng)過官方的一頓簡化之后需要的并沒有那么繁瑣。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序點擊view動態(tài)添加樣式過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
微信小程序?qū)崿F(xiàn)側(cè)邊欄二級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊欄二級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
使用Javascript插件,在瀏覽器客戶端動態(tài)的為代碼著色,可以顯示行號，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法
這篇文章主要介紹了JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法,實例分析了javascript獲取本地時間及動態(tài)顯示的技巧,并對實現(xiàn)代碼進行了較為詳盡的分析說明,需要的朋友可以參考下2015-02-02
javascript foreach中如何獲取數(shù)組下標(biāo)/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標(biāo)/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章是對捕獲鍵盤事件(且兼容各瀏覽器)的實現(xiàn)進行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
這篇文章主要源碼解讀了Bootstrap按鈕，介紹了Bootstrap各式各樣的按鈕,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS module的導(dǎo)出和導(dǎo)入的實現(xiàn)代碼
這篇文章主要介紹了JS module的導(dǎo)出和導(dǎo)入的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
全面解析Bootstrap中tooltip、popover的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中tooltip、popover的使用方法，了解提示框、彈出框的實現(xiàn)原理，感興趣的朋友可以參考一下2016-06-06
在做微信小程序開發(fā)時,遇到一個問題,要如何實現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡單實現(xiàn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11