前端系列——快速理解babel6配置過程

Jeff 發布于2019-08-21 18:43 / 1317人閱讀

摘要：下面提供具體的版本號給大家參考你相信嗎上面個插件，就能生成圖片上那幾十個插件，這一切歸功于插件之間的依賴關系。好了，現在不害怕了，因為配置原來如此的簡單。

繁瑣的配置？

你能快速讀懂babel的官方文檔嗎？

你能根據官方文檔快速配置好babelrc嗎？

你能明白自己需要哪些插件嗎？

沒有搞明白這3個問題，請往下看。

快速理解babel 6 來看一張讓人顫抖的babel插件圖

下圖僅僅截取了部分，一屏都截取不完，還有babel插件隱藏在下面，你害怕了嗎？

忘記上面的圖吧，那是罪惡之源

當你忘記一切的時候，你只需要理解幾個基本的東西即可。

只需要下面幾個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,默認向后支持
5、babel-plugin-transform-runtime 
6、babel-runtime //5和6是一起使用的，支持helpers，polyfill，regenerator配置

上面6大插件添加到package.json，便可完成一個普通開發者的需求了，那么，如果是個react開發者，則還需要添加下面幾個插件

1、babel-plugin-transform-decorators-legacy //支持修飾符語法 @connect
2、babel-preset-react //支持解析react語法

如果你想要支持熱更新呢，還需要一個插件

1、react-hot-loader //雖然它長得不像babel，但是它也需要在babelrc做配置

其他插件呢？
從我的感受來看，上面這幾個插件的集合已經覆蓋了大部分ES語法了，如果是vue開發者，則把react的替換成vue。通常我們不再需要考慮其他插件。

這些插件的具體版本號

請注意，babel插件一直在更新，至今已經出了babel7。而本章內容是介紹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個插件，就能生成圖片上那幾十個插件，這一切歸功于插件之間的依賴關系。

babelrc配置

現在，你只要考慮上面列舉的插件以及版本號，就能把babel快速配置出來了，相當簡單

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, //建議為false
      "polyfill": false, //是否開始polyfill，根據你的網站兼容性情況來看，通常我不開啟，開啟會增加很多額外的代碼
      "regenerator": true //必須true，否則js就廢了
    }],
    "react-hot-loader/babel", //熱更新插件
    "transform-decorators-legacy" //修飾符語法轉換插件
  ]
}

webpack loader配置

babel-loader配置也相當簡單，至于react-hot-loader在webpack中的配置，請自行查看文檔。

module: {
        rules: [{
            test: /.jsx?$/,
            use: "babel-loader"
        }]
    }

總結

我始終相信，一個好的工程，應該盡量用簡單的代碼去解決簡單的事情，而不是用復雜的代碼去解決簡單的事情。

很多人，包括我自己，在以前也經常被babel和webpack的配置搞的焦頭爛額，特別是babel，經常報這個插件的錯、那個插件的錯，有時候不知道少了什么插件。

好了，現在不害怕了，因為babel配置原來如此的簡單。

GPU云服務器云服務器深入理解系列怎么理解前端工程師快速開發前端前端快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90747.html

庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發工程師）本文原創，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0
babel6 入門-配置安裝使用_byKL

摘要：入門什么是是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。 babel6 入門什么是babel Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。因為es6比es5的代碼更為適合編寫程序,但是因為歷史的原因,現在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運行出錯,因為瀏覽器的javas...

qianfeng 2019-08-20 14:31 評論0 收藏0
babel基礎配置

摘要：基礎配置如下設置轉碼規則和插件字段設定轉碼規則，官方提供以下的規則集，按需安裝。結合許多工具需要進行前置轉碼，如和在項目根目錄下，新建一個配置文件，在其中加入字段。在之中，加入相應的腳本部分參考到底該如何配置 babel 標簽（空格分隔）： babel babel Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。 Babel 會在正在被轉錄的文...

UsherChen 2019-08-23 14:58 評論0 收藏0
Webpack初學遇到的問題

摘要：的功能包轉譯過程中使用到的插件，其中是步驟使用的。階段使用到的一系列標準新增的原生對象和的，實現上僅僅是和兩個包的封裝。功能類似一般用于或者中，因為它不會污染全局變量引入圖片資源時遇到的問題 Module parse failed: Unexpected character ? (1:0) You may need an appropriate loader to handle th...

taoszu 2019-08-22 18:49 評論0 收藏0