使用babel本地项目转码实操
- 使用node init初始化项目，相关配置可以依据自己需要自行编辑。初始化完成中项目根目录中会出现package.json文件，该文件为node相关配置信息，如下：
{
"name": "test2", //名称
"version": "1.0.0", //版本号
"description": "", //描述
"main": "index.js", //项目入口文件
"scripts": { //配置快捷命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { //git仓库
"type": "git",
"url": "git+https://github.com/fighxp/test.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/fighxp/test/issues"
},
"homepage": "https://github.com/fighxp/test#readme", //github对应仓库中readme
"devDependencies": { //项目依赖库及对应版本号
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1"
}
}
2.安装配置转码规则集
$ npm install babel-preset-env --save-dev
3.项目中新建配置文件，重命名为.babelrc，加入配置信息
{
"presets":[
"env"
],
"pligins":[]
}
4.安装babel-cli命令行转码工具
$ cnpm install babel-cli --save-dev
使用下面命令查看babel-cli是否安装成功：
$ babel-cli --version
报以下错误，解决方法：
- 配置系统环境变量 path
- 更改本地项目安装babel-cli为全局安装babel-cli
- 使用管理员身份运行vscode
babel : 无法将“babel”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ babel --version
+ ~~~~~
+ CategoryInfo : ObjectNotFound: (babel:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
5.项目中新建文件夹 src 存放es6开发版js文件， dist存放转码后es5文件
- 转码单个文件：使用下方命令，将src中es6文件转码为es5文件并保存至dist/index.js中
$ babel src/index.js -o dist/index.js
- 转码整个文件夹：
$ babel src -d dist
- 实时监控，保存后自动转码
$ babel src -w -d dist
ES6使用babel转码器——理论知识
官方提供规则集，可根据需要进行安装。
- 最新转码规则
$ cnpm install --save-dev babel-preset-latest
- react转码规则
$ cnpm install --save-dev babel-preset-latest
- 不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ cnpm install --save-dev babel-preset-stage-0
$ cnpm install --save-dev babel-preset-stage-1
$ cnpm install --save-dev babel-preset-stage-2
$ cnpm install --save-dev babel-preset-stage-3
bable配置文件.babelrc
.babelrc配置文件一般在项目根目录。 设置转码规则和插件
{
"presets":[],
"plugins":[]
}
新建配置文件.babelrc,放至项目根目录：
{
"presets":[
"latest",
"react",
"stage-2"
],
"pligins":[]
}
命令行转码babel-cli
全局安装
npm install --global babel-cli
用法 转码结果标准输出
$ babel example.js
转码结果写入指定文件
$ babel example.js --out-file complie.js
整个目录转码 --out-dir 或 -d参数指定输出目录
$ babel src --out-dir lib
或者
$ babel src -d lib
-s参数生产source map文件
$ babel src -d lib -s
全局安装存在弊端：
- 项目对环境产生依赖，必须全局环境中安装有Babel。
- 无法支持不同项目使用不同版本的babel
babel-cli安装在项目之中
$ npm install --save-dev babel-cli
然后，改写package.json文件
{
//
"devDependencies":{
"babel-cli":"^6.0.0"
},
"scripts":{
"build":"babel src -d lib"
}
}
转码时候执行
$ npm run build
