npm init -y 初始化package.json文件
1.全局安装 @babel/cli @babel/core
npm install -g @babel/cli @babel/core
babel -V //7.5.5 (@babel/core 7.5.5) 即安装成功 mac 需➕sudo
2.接下来在项目中安装 @babel/core @babel/preset-env
npm install --save-dev @babel/core @babel/preset-env
3.安装 @babel/polyfill
npm install --save @babel/polyfill
@babel/core 是babel 核心的包 包括所有核心的api
@babel/cli 是通过命令转换js的工具
@babel/preset-env 指定转换的环境,配置插件,对哪些语法转换
@babel/polyfill 是对babel本身不支持的一些语法转换的 填充
4.创建babel.config.js 配置转换的环境,仅转换环境不支持的部分
5.创建.babelrc文件 配置presets 和plugins 等,
例如要支持decorator和class转换
需先下载@babel/plugin-proposal-decorators 和@babel/plugin-proposal-class-properties 在更改.babelrc
//.babelrc 文件内代码
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", {"loose": true}]
]
}
6.运行babel 待转换文件/文件夹 -o 转换后文件
注:还有些插件用于解析js,详见官方文档https://www.babeljs.cn/docs/plugins
TC39 将提案分为以下几个阶段:
- Stage 0 - 设想(Strawman):只是一个想法,可能有 Babel插件。
- Stage 1 - 建议(Proposal):这是值得跟进的。
- Stage 2 - 草案(Draft):初始规范。
- Stage 3 - 候选(Candidate):完成规范并在浏览器上初步实现。
- Stage 4 - 完成(Finished):将添加到下一个年度版本发布中。
6.x版本可以npm install --save-dev @babel/preset-stage-2
.babelrc文件内"presets": ["@babel/preset-stage-2"]
7.x版本,所有针对处于标准提案阶段的功能所编写的预设(阶段预设)都已被弃用。不允许上述方式,改完插件方式
{
"plugins": [
// Stage 2
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"
]
}
以上为运用babel的最新体验 2019.8.14
babel原理理解。。。待续