ES6 check AND Babel
来源:互联网 发布:淘宝店铺名怎么修改 编辑:程序博客网 时间:2024/05/17 06:13
- 检查各种运行环境对 ES6 的支持情况。
工具: ES-Checker
访问ruanyf.github.io/es-checker,可以看到浏览器对 ES6 的支持程度。
or
运行下面的命令,可以查看你正在使用的 Node 环境对 ES6 的支持程度。
$ npm install -g es-checker
$ es-checker - Babel转码器
Babel,可将ES6代码转为ES5,在不支持ES6的环境下运行。
Babel的配置文件 .babelrc,在项目根目录下。
Create a .babelrc file (or use your package.json),基本格式如下:
{
"presets": [],
"plugins": []
}
Babel can convert JSX syntax and strip out type annotations.
命令行转码 babel-cli 工具
安装命令: $ npm install --global babel-cli
Compile Files
-> Compile the file script.js and output to stdout.
$ babel script.js
-> output to a file you may use –out-file or -o
$ babel script.js --out-file script-compiled.js
-> compile a file every time that you change it, use the –watch or -w
$ babel script.js --watch --out-file script-compiled.js
Compile with Source Maps
-> add a source map file you can use –source-maps or -s
$ babel script.js --out-file script-compiled.js --source-maps
-> If you would rather have inline source maps, you may use –source-maps inline.
$ babel script.js --out-file script-compiled.js --source-maps inline
Compile Directories
-> Compile the entire src directory and output it to the lib directory. You may use –out-dir or -d.
$ babel src --out-dir lib
-> Compile the entire src directory and output it to the one concatenated file.
$ babel src --out-file script-compiled.js
Ignore files
-> Ignore spec and test files
$ babel src --out-dir lib --ignore spec.js,test.js
Copy files
-> Copy files that will not be compiled
$ babel src --out-dir lib --copy-files
…… 更多
上述命令在全局环境下,如果项目要运行,全局环境必须要有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
资源出处