升級到Babel 7的經(jīng)驗

isLishude 發(fā)布于2019-08-23 12:10 / 2933人閱讀

摘要：最近我在給自己團隊的組件庫升級到，沒有想象中那么難，但也有一些需要注意的問題，這里分享一些升級的體會和經(jīng)驗。這個是屬于提案。

Babel的最新版本Babel 7 已經(jīng)在Henry Zhu的不斷努力下發(fā)布了，他真的是全身心地投入到了Babel的開發(fā)中，而Babel對于前端界的貢獻也是有目共睹，沒有這個神奇的編譯器，前端界要落地ES6語法恐怕還要再等十年。

最近我在給自己團隊的UI組件庫升級到Babel 7，沒有想象中那么難，但也有一些需要注意的問題，這里分享一些升級的體會和經(jīng)驗。

關于stage-x插件的廢棄

Babel 7的改動還是不少的，一個比較大的改動在于移除了之前的stage-x插件，根據(jù)官方博客的解釋，stage-x插件原本是對應于ECMA Script提案中的不同階段，每個階段有不同特性，而stage-x插件事實上就是集合這個階段中幾種特性轉(zhuǎn)譯的插件，比如我們最經(jīng)常看到的babel-preset-stage-0，其實就是這樣的：

module.exports = {
  presets: [
    require("babel-preset-stage-1")
  ],
  plugins: [
    require("babel-plugin-transform-do-expressions"),
    require("babel-plugin-transform-function-bind")
  ]
};

每個stage插件都會包含下一階段的所有插件，這就導致大家為了能用上大多數(shù)特性，紛紛采用了babel-preset-stage-0，React項目中，我們最經(jīng)常看到的babelrc配置是這樣的：

{
  "presets": ["es2015", "react", "stage-0"]
}

然而，提案一直在變，如今是stage 0的特性，可能之后就進入到了stage 1，也可能之后直接被否決拋棄掉，并不會進入到ES規(guī)范中。那么babel是不是應該更新這些stage插件呢？如果更新了，現(xiàn)階段大量前端項目、npm庫都在使用這個stage插件，會不會突然發(fā)現(xiàn)就編譯不了某個特性了呢？

到底應該遵循規(guī)范，還是應該遷就老項目做兼容呢？

最后Babel團隊做出來的決定是，廢棄掉stage-x插件！這不僅僅是關乎上面這個問題，由于大家已經(jīng)習慣了stage的配置，對于其中封裝的各個特性早已不再關心，廢除掉stage-x插件，開發(fā)者就得加上自己需要的插件，每個插件對應一個提案中的特性，這樣項目中的配置也能更清晰。

另外，之前的命名也由@babel/plugin-transform-改為@babel/plugin-proposal-，就是為了強調(diào)這只是一個提案中的特性，并不能確保它會出現(xiàn)在下一代的ES規(guī)范中。

es2015 插件 -> env 插件

babel-preset-env已經(jīng)發(fā)布了一段時間，它相比es2015可以更加靈活地配置，Babel 7宣布廢棄babel-preset-es201x而采用新的env插件也是理所當然，這個插件的配置不再贅述，可以參考官方文檔

說說babel-upgrade

為了讓你更方便的升級到Babel 7，官方提供了一個工具babel-upgrade，對于已有的項目，只需要運行這樣一行命令就可以了：

npx babel-upgrade --write --install

但是這就是為什么我先寫了前面這兩節(jié)的原因，這個工具的本質(zhì)其實就是把之前的es2015換成env，stage-x換成各種proposal-xxx，并且加上了@babel作為新的Babel 7生態(tài)統(tǒng)一使用的scope。如果之前的項目使用了stage-x插件，就會多出大量的插件，其實這里面大部分插件都是無需使用的，你可以根據(jù)項目中用到的特性適當刪減。

事實上，我最后項目中只使用了一個插件，babelrc配置如下：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": ["@babel/proposal-class-properties"]
}

說說babel-plugin-transform-class-properties

這個插件在React項目中十分常用，因為我們經(jīng)常需要將React組件類中的方法的this綁定到組件本身，如果不用箭頭函數(shù)，我們就需要使用bind將函數(shù)一個個綁定好，但如果可以使用箭頭函數(shù)在class字段中直接綁定的話，就非常方便了，即：

class Bork {
    boundFunction = () => {
        return this.state;
    }
}

這樣，箭頭函數(shù)被當作成class的屬性來看待，this也不會指向undefined。

這個特性就需要babel-plugin-transform-class-properties來轉(zhuǎn)譯，這個插件在原來是包含在stage-2里面的，現(xiàn)在，就需要多帶帶引入。
當然其實這里最好是引入@babel/plugin-proposal-class-properties，更加符合規(guī)范。

這個是屬于Class Field提案。

云服務器 GPU云服務器升級默認python2.7為python 升級到升級到企業(yè)版升級到VS2013

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98040.html

Webpack + Vue 多頁面項目升級 Webpack 4 以及打包優(yōu)化

摘要：想要使用階段的語法需要單獨引用對應的，上面的配置只加了幾個處于階段的，老項目建議使用升級，自動添加依賴添加配置文件按需引入增加配置其他問題下面是我公司項目中遇到的問題，各位升級過程中如果遇到同樣的問題可以參考一下解決思路。 0. 前言早在 2016 年我就發(fā)布過一篇關于在多頁面下使用 Webpack + Vue 的配置的文章，當時也是我在做自己一個個人項目時遇到的配置問題，想到別人也...

Anchorer 2019-08-23 14:24 評論0 收藏0
如何搭建一個基于react、webpack4、babel7的項目（一）

摘要：對的工作流程有點模糊，以及據(jù)官方文檔稱的升級，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進效果。這些在后面文章中，都會一個個涉及到，此處不做詳細展開。前言寫前端項目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模...

IamDLY 2019-08-23 12:30 評論0 收藏0
react技術(shù)棧升級的過程

摘要：第一階段升級到升級到遇到的坑在中去除，導致需要替換成。中把內(nèi)置的去掉，添加了和平級的屬性，來區(qū)分環(huán)境。的有這中屬性，若要在系統(tǒng)中使用，則用變量來獲取，比較奇葩。的路徑原來的，應替換為相對路徑的。第一階段： react15+react-router2+redux3+webpack1 升級到 react16+react-router3+redux4+webpack4 1.reac...

Ethan815 2019-08-23 11:56 評論0 收藏0
前端周刊第57期：《戰(zhàn)爭與和平版》的 CSS-IN-JS 黑歷史

摘要：以戰(zhàn)爭與和平為藍本回顧了歷史，也給出了非常贊的觀察視角，程序員應該務實，而不是教條，更重要的是保持好奇心。初版于年前發(fā)布的，作者重寫整個倉庫從到之后，最近發(fā)布了版本，新版最大變化是升級到。 showImg(https://segmentfault.com/img/remote/1460000009584813); 不知道大家是否注意到，社區(qū)中出現(xiàn)的 CSS 尤其是 CSS-IN-JS...

zhangqh 2019-08-20 16:53 評論0 收藏0
【翻譯】babel對TC39裝飾器草案的實現(xiàn)

摘要：歷史裝飾器這個概念三年多前被首次提出。在版本年中發(fā)布了對裝飾器的支持以及許多特性。有不同的安全級別需要考慮裝飾器不應該意外泄漏私有名稱。你可以測試裝飾器的新語法，并向提案的作者們提出反饋意見。原文地址：https://babeljs.io/blog/2018/...原文作者：Nicolò Ribaudo Babel 7.1.0最終支持新的裝飾器提案，可以通過@babel/plugin...

Mr_zhang 2019-08-23 15:30 評論0 收藏0