在某次新项目构建中需要增加对spread
语法的支持,由于babel 7.0
版本废弃了对stage-x
的支持,因此我们无法直接通过@babel/preset-stage-0
来直接配置proposal
语法支持,但官方依然可以让我们通过手动增加相应的plugin
来进行适配。例如这里的spread
语法,就可以通过@babel/plugin-proposal-object-rest-spread
来进行支持,具体安装可以见官方文档。
这里需要指出的是,官方给出了一个好用的工具---babel-upgrade,来帮助我们批量的增加proposl
语法的支持,免去了手动一次导入的繁琐,其本意是为了让之前已经使用了stage-x
的用户能够快速迁移到新版本的babel
中来。具体用法如下:
# npx lets you run babel-upgrade without installing it locally
npx babel-upgrade --write
# or install globally and run
npm install babel-upgrade -g
babel-upgrade --write
当然,在使用之前,记得在devDependencies
中先加入@babel/preset-stage-0
,这样所有stage-0
以上的语法相关的插件都会被批量安装进来,效果如下:
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
},
大功告成!接下来只需要将合适的plugin
在.babelrc
中进行配置 即可,例如支持spread
语法:
"plugins":[
// 支持`spread`语法
"@babel/plugin-proposal-object-rest-spread"
]
网友评论