成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

前端系列——快速理解babel6配置過(guò)程

Jeff / 1460人閱讀

摘要：下面提供具體的版本號(hào)給大家參考你相信嗎上面?zhèn)€插件，就能生成圖片上那幾十個(gè)插件，這一切歸功于插件之間的依賴(lài)關(guān)系。好了，現(xiàn)在不害怕了，因?yàn)榕渲迷瓉?lái)如此的簡(jiǎn)單。

繁瑣的配置？

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

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

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

沒(méi)有搞明白這3個(gè)問(wèn)題，請(qǐng)往下看。

快速理解babel 6 來(lái)看一張讓人顫抖的babel插件圖

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

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

當(dāng)你忘記一切的時(shí)候，你只需要理解幾個(gè)基本的東西即可。

只需要下面幾個(gè)babel插件，就能解析大部分ES方法

1、babel-core //必備的核心庫(kù)
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，便可完成一個(gè)普通開(kāi)發(fā)者的需求了，那么，如果是個(gè)react開(kāi)發(fā)者，則還需要添加下面幾個(gè)插件

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

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

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

其他插件呢？
從我的感受來(lái)看，上面這幾個(gè)插件的集合已經(jīng)覆蓋了大部分ES語(yǔ)法了，如果是vue開(kāi)發(fā)者，則把react的替換成vue。通常我們不再需要考慮其他插件。

這些插件的具體版本號(hào)

請(qǐng)注意，babel插件一直在更新，至今已經(jīng)出了babel7。而本章內(nèi)容是介紹babel6，請(qǐng)不要亂用版本。

下面提供具體的版本號(hào)給大家參考

    "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個(gè)插件，就能生成圖片上那幾十個(gè)插件，這一切歸功于插件之間的依賴(lài)關(guān)系。

babelrc配置

現(xiàn)在，你只要考慮上面列舉的插件以及版本號(hào)，就能把babel快速配置出來(lái)了，相當(dāng)簡(jiǎn)單

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, //建議為false
      "polyfill": false, //是否開(kāi)始polyfill，根據(jù)你的網(wǎng)站兼容性情況來(lái)看，通常我不開(kāi)啟，開(kāi)啟會(huì)增加很多額外的代碼
      "regenerator": true //必須true，否則js就廢了
    }],
    "react-hot-loader/babel", //熱更新插件
    "transform-decorators-legacy" //修飾符語(yǔ)法轉(zhuǎn)換插件
  ]
}
webpack loader配置

babel-loader配置也相當(dāng)簡(jiǎn)單，至于react-hot-loader在webpack中的配置，請(qǐng)自行查看文檔。

module: {
        rules: [{
            test: /.jsx?$/,
            use: "babel-loader"
        }]
    }
總結(jié)

我始終相信，一個(gè)好的工程，應(yīng)該盡量用簡(jiǎn)單的代碼去解決簡(jiǎn)單的事情，而不是用復(fù)雜的代碼去解決簡(jiǎn)單的事情。

很多人，包括我自己，在以前也經(jīng)常被babel和webpack的配置搞的焦頭爛額，特別是babel，經(jīng)常報(bào)這個(gè)插件的錯(cuò)、那個(gè)插件的錯(cuò)，有時(shí)候不知道少了什么插件。

好了，現(xiàn)在不害怕了，因?yàn)閎abel配置原來(lái)如此的簡(jiǎn)單。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90747.html

相關(guān)文章

  • 庫(kù)，組件，框架 - 收藏集 - 掘金

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

    tommego 評(píng)論0 收藏0

  • babel6 入門(mén)-配置安裝使用_byKL

    摘要：入門(mén)什么是是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 babel6 入門(mén) 什么是babel Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 因?yàn)閑s6比es5的代碼更為適合編寫(xiě)程序,但是因?yàn)闅v史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫(xiě)es6代碼之后,在瀏覽器上運(yùn)行出錯(cuò),因?yàn)闉g覽器的javas...

    qianfeng 評(píng)論0 收藏0

  • babel基礎(chǔ)配置

    摘要：基礎(chǔ)配置如下設(shè)置轉(zhuǎn)碼規(guī)則和插件字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，按需安裝。結(jié)合許多工具需要進(jìn)行前置轉(zhuǎn)碼，如和在項(xiàng)目根目錄下，新建一個(gè)配置文件，在其中加入字段。在之中，加入相應(yīng)的腳本部分參考到底該如何配置 babel 標(biāo)簽（空格分隔）： babel babel Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 Babel 會(huì)在正在被轉(zhuǎn)錄的文...

    UsherChen 評(píng)論0 收藏0

  • Webpack初學(xué)遇到的問(wèn)題

    摘要：的功能包轉(zhuǎn)譯過(guò)程中使用到的插件，其中是步驟使用的。階段使用到的一系列標(biāo)準(zhǔn)新增的原生對(duì)象和的，實(shí)現(xiàn)上僅僅是和兩個(gè)包的封裝。功能類(lèi)似一般用于或者中，因?yàn)樗粫?huì)污染全局變量 引入圖片資源時(shí)遇到的問(wèn)題 Module parse failed: Unexpected character ? (1:0) You may need an appropriate loader to handle th...

    taoszu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<