升級到Babel 7的經驗

isLishude 發布于2019-08-23 12:10 / 2937人閱讀

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

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

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

關于stage-x插件的廢棄

Babel 7的改動還是不少的，一個比較大的改動在于移除了之前的stage-x插件，根據官方博客的解釋，stage-x插件原本是對應于ECMA Script提案中的不同階段，每個階段有不同特性，而stage-x插件事實上就是集合這個階段中幾種特性轉譯的插件，比如我們最經常看到的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插件都會包含下一階段的所有插件，這就導致大家為了能用上大多數特性，紛紛采用了babel-preset-stage-0，React項目中，我們最經常看到的babelrc配置是這樣的：

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

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

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

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

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

es2015 插件 -> env 插件

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

說說babel-upgrade

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

npx babel-upgrade --write --install

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

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

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

說說babel-plugin-transform-class-properties

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

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

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

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

這個是屬于Class Field提案。

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

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

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

Webpack + Vue 多頁面項目升級 Webpack 4 以及打包優化

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

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

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

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

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

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

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

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

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

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