Babel 是什么?
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中
直接开整
首先需要node环境,这是前提
1.在本地目录下npm init,它会自动生成一个package.json文件
其他文件不用管,这是我已经安装好的样子
2.安装babel命令行工具(不建议在全局安装)
npm install --save-dev babel-cli
3.在命令行中调用babel
配置package.json文件
在script中添加
"build": "babel src -d lib"
4.创建.babelrc文件
type nul>.babelrc
5.安装babel转译器
npm install --save-dev babel-preset-env
如果安装时出现了如下问题,可能是node版本太老的原因
fetchMetadata: sill resolveWithNewModule find-cache-dir@
如果新版依旧解决不了问题,可以换成淘宝的源:
npm config set registry https://registry.npm.taobao.org
通过下面两种方法验证是否更换成功
npm config get registry
npm info express
准备就绪后看看package.json是否有作更改
6.配置.babelrc文件
官方提供了一些转码规则,按需安装
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
在.babelrc加入这些规则
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
我这里只安装了ES2015的转码规则:
到这里配置就已经完成了
接下来就是使用
因为我们的babel命令是babel src -d lib,所以需要在目录下创建一个src文件夹,里面放入我们编写的js文件
在babel文件目录下
npm run build
在babel文件下就会自动生成一个lib文件夹,里面存放了编译之后的文件