前言
Babel可以說是目前前端工程中必備的一款工具鏈(除非你還在用ES6以前的語法),主要用於在舊的瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換爲向後兼容版本的JavaScript代碼。Babel 7 已於2018年8月份正式發佈,其中更新了很多的用法和內容,使得幾乎要重新安裝NPM包和配置Babel文件。這篇文章詳細的介紹瞭如何從Babel 6以前的版本升級成Babel 7,項目以React項目爲例子,希望能夠對大家有幫助。
開始
我們項目中的Babel配置文件放在了**.babelrc**文件中,Babel官方如是說:
You want to programmatically create the configuration?
You want to compile node_modules?
babel.config.js
is for you!
You have a static configuration that only applies to your simple single package?
.babelrc
is for you!
大致意思就是如果你的配置文件很簡單,那麼使用.babelrc就可以了,但是如果你想要更加靈活的動態配置項,那麼使用babel.config.js更加合適。這裏選擇將.babelrc改爲babel.config.js文件,接下來先安裝新的Babel插件包。
在Babel 7中,最重要的升級之一就是將所有的packages改爲了scoped packages,這將有效的避免重名或者名稱被搶注的問題,而且在命名上就與普通的社區packages區別開來,更加的清晰。所以我們將原先安裝的Babel核心包babel-core改爲**@babel/core**
npm install --save-dev @babel/core
同樣的,其餘的組件也要統統改爲@babel命名安裝,在不確定是否有@babel格式前,可以去Babel的中文官網搜索下。
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/preset-react
現在就可以配置Presets,Presets包含已經配置好的插件,能夠簡化你自己配置插件的步驟,拿來即用。
presets: [
[
'@babel/env',
{
'modules': false,
'debug': false,
'targets': {
'browsers': [
'last 2 versions',
'ie >= 11'
]
}
}
],
'@babel/react',
'@babel/flow'
]
其實這裏和舊的配置的區別就在於把原來每個預置的名稱加上了@babel
,安裝完預置之後可以根據項目需求安裝插件了,將以前的插件比如babel-plugin-transform-runtime改爲**@babel/plugin-transform-runtime安裝,其他的插件也要這樣修改。像@babel/proposal-object-rest-spread和@babel/proposal-decorators**這樣的插件,因爲配置方法的改變,所以需要根據官方文檔重新配置。
{
plugins: [
'lodash',
[
'@babel/transform-runtime',
{
'corejs': false,
'helpers': true,
'regenerator': true,
'useESModules': false
}
],
[
'@babel/proposal-object-rest-spread',
{
'loose': true,
'useBuiltIns': true
}
],
[
'@babel/proposal-decorators',
{
'legacy': true
}
],
],
結語
基本上常用的一些配置升級方法就簡單的介紹完了,還有env之類的配置也是差不多的,在運行項目時babel插件會在根目錄下尋找babel.config.js文件來執行,所以差不多就大功告成了。