資訊專欄INFORMATION COLUMN
摘要：下面提供具體的版本號給大家參考你相信嗎上面?zhèn)€插件，就能生成圖片上那幾十個插件，這一切歸功于插件之間的依賴關(guān)系。好了，現(xiàn)在不害怕了，因為配置原來如此的簡單。
繁瑣的配置？
你能快速讀懂babel的官方文檔嗎？
你能根據(jù)官方文檔快速配置好babelrc嗎？
你能明白自己需要哪些插件嗎？
沒有搞明白這3個問題，請往下看。
快速理解babel 6 來看一張讓人顫抖的babel插件圖下圖僅僅截取了部分，一屏都截取不完，還有babel插件隱藏在下面，你害怕了嗎？
忘記上面的圖吧，那是罪惡之源當(dāng)你忘記一切的時候，你只需要理解幾個基本的東西即可。
只需要下面幾個babel插件，就能解析大部分ES方法
1、babel-core //必備的核心庫 2、babel-loader //webpack loader配置必備 3、babel-preset-env //有了它，你不再需要添加2015、2016、2017，全都支持 4、babel-preset-stage-0 //有了它，你不再需要添加stage-1,stage-2,stage-3,默認(rèn)向后支持 5、babel-plugin-transform-runtime 6、babel-runtime //5和6是一起使用的，支持helpers，polyfill，regenerator配置
上面6大插件添加到package.json，便可完成一個普通開發(fā)者的需求了，那么，如果是個react開發(fā)者，則還需要添加下面幾個插件
1、babel-plugin-transform-decorators-legacy //支持修飾符語法 @connect 2、babel-preset-react //支持解析react語法
如果你想要支持熱更新呢，還需要一個插件
1、react-hot-loader //雖然它長得不像babel，但是它也需要在babelrc做配置
其他插件呢？
從我的感受來看，上面這幾個插件的集合已經(jīng)覆蓋了大部分ES語法了，如果是vue開發(fā)者，則把react的替換成vue。通常我們不再需要考慮其他插件。
請注意，babel插件一直在更新，至今已經(jīng)出了babel7。而本章內(nèi)容是介紹babel6，請不要亂用版本。
下面提供具體的版本號給大家參考
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"react-hot-loader": "^3.1.2",
你相信嗎？上面9個插件，就能生成圖片上那幾十個插件，這一切歸功于插件之間的依賴關(guān)系。
babelrc配置現(xiàn)在，你只要考慮上面列舉的插件以及版本號，就能把babel快速配置出來了，相當(dāng)簡單
{
"presets": [
"env",
"react",
"stage-0"
],
"plugins": [
["transform-runtime", {
"helpers": false, //建議為false
"polyfill": false, //是否開始polyfill，根據(jù)你的網(wǎng)站兼容性情況來看，通常我不開啟，開啟會增加很多額外的代碼
"regenerator": true //必須true，否則js就廢了
}],
"react-hot-loader/babel", //熱更新插件
"transform-decorators-legacy" //修飾符語法轉(zhuǎn)換插件
]
}
webpack loader配置
babel-loader配置也相當(dāng)簡單，至于react-hot-loader在webpack中的配置，請自行查看文檔。
module: {
rules: [{
test: /.jsx?$/,
use: "babel-loader"
}]
}
總結(jié)
我始終相信，一個好的工程，應(yīng)該盡量用簡單的代碼去解決簡單的事情，而不是用復(fù)雜的代碼去解決簡單的事情。
很多人，包括我自己，在以前也經(jīng)常被babel和webpack的配置搞的焦頭爛額，特別是babel，經(jīng)常報這個插件的錯、那個插件的錯，有時候不知道少了什么插件。
好了，現(xiàn)在不害怕了，因為babel配置原來如此的簡單。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90747.html
摘要：哈哈，我理解，架構(gòu)就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創(chuàng)辦的使命是讓你及時的了解開發(fā)中最新最酷的趨勢。 翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發(fā)工程師） 本文原創(chuàng)，轉(zhuǎn)載請注明作者及出處。 原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結(jié)構(gòu) - ...
摘要：入門什么是是一個廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 babel6 入門 什么是babel Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 因為es6比es5的代碼更為適合編寫程序,但是因為歷史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運行出錯,因為瀏覽器的javas...
摘要：基礎(chǔ)配置如下設(shè)置轉(zhuǎn)碼規(guī)則和插件字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，按需安裝。結(jié)合許多工具需要進(jìn)行前置轉(zhuǎn)碼，如和在項目根目錄下，新建一個配置文件，在其中加入字段。在之中，加入相應(yīng)的腳本部分參考到底該如何配置 babel 標(biāo)簽（空格分隔）： babel babel Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 Babel 會在正在被轉(zhuǎn)錄的文...
摘要：的功能包轉(zhuǎn)譯過程中使用到的插件，其中是步驟使用的。階段使用到的一系列標(biāo)準(zhǔn)新增的原生對象和的，實現(xiàn)上僅僅是和兩個包的封裝。功能類似一般用于或者中，因為它不會污染全局變量 引入圖片資源時遇到的問題 Module parse failed: Unexpected character ? (1:0) You may need an appropriate loader to handle th...
閱讀 650·2023-04-26 02:08
閱讀 2669·2021-11-18 10:02
閱讀 3472·2021-11-11 16:55
閱讀 2354·2021-08-17 10:13
閱讀 2915·2019-08-30 15:53
閱讀 697·2019-08-30 15:44
閱讀 2561·2019-08-30 11:10
閱讀 1768·2019-08-29 16:57
