babel工具使用:
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的
JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出的是 Babel 能为你做的事情:
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods) ----摘自官网
1、线上使用:https://www.babeljs.cn (点击进入在线babel工具,了解更多)
2、本地使用:
①打开项目文件夹:(敲击命令行)
$ cnpm init -y //初始化;
$ cnpm install @babel/core -D //本地下载 @babel/core工具,提供语法树功能;
$ cnpm install @babel/preset-env -D //下载插件集合,提供转译功能;
$ cnpm install @babel/cli -D //下载cli保证可以供过命令行直接操作文件指令;
② 本地配置文件进行配置(.babelrc文件):
书写内容要严格按照json并书写规范,双引号等
{
"presets":[ //预设:
"@babel/preset-env" //用babel降级时用@babel/preset-env插件降级;
]
}
③再次敲击命令完成降译:
$ npx babel index.js -o newindex.js //将index.jsES6语法,转译为ES5;
$ npx babel index.js -o newindex.js --watch //可实时监控文件变换;
之后在本地的js文件中编写的ES6代码即可自动转译为ES5,当然目前浏览器可直接读取ES6方法