什么是Babel?
一款JavaScript 编译器 主要用于在旧的浏览器或环境中将 ECMAScript 2015+
代码转换为向后兼容版本的 JavaScript 代码。
一、Babel的使用规则:
使用规则
- 编译目录
npx babel src(原目录) --out-dir lib(目标目录)
npx babel src(原目录) --out-file script-compiled.js(目标js文件)
// 编译src到lib 示例
npx babel src --out-dir lib
- 编译文件
npx babel script.js(原文件) --out-file(or -o) script-compiled.js(目标文件)
// 编译script.js到 script-compiled.js 项目使用可以直接引入script-compiled.js
npx babel script.js --out-file script-compiled.js
// 实时更新方法添加: --watch 或 -w。相当于vue的实时编译
- 忽略文件
npx babel src --out-dir lib --ignore spec.js,test.js(忽略文件名)
// 编译src文件夹到lib文件夹 并忽略其中的spec.js,test.js两个文件
npx babel src --out-dir lib --ignore spec.js,test.js
- 复制不需要编译的文件
npx babel src(编译源文件) --out-dir lib(目标文件) --copy-files
// 忽略不需要编译的lib文件夹
npx babel src --out-dir lib --copy-files
- 使用插件 --plugins
npx babel script.js --out-file script-compiled.js --plugins=transform-runtime,transform-es2015-modules-amd
二、es6转es5示例
1、初始化创建 package.json文件
npm init
2、安装 babel
npm install --save-dev babel-cli
3、es6转es5需要增加 规则插件
npm install --save-dev babel-preset-es2015
//es7
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
4、 项目目录新建.babelrc文件,写入如下自运行函数:
{
"presets": ["es2015"],
"plugins": []
}
5、 项目目录新建script.js文件,写入如下自运行函数:
(()=>{
const a=2})()
6、然后重新运行编译 :
npx babel script.js --out-file script-compiled.js
7、查看script-compiled.js文件编译结果如下:
"use strict";
(function () {
var a = 2;
})();
附demo下载地址:https://download.csdn.net/download/qq_27751965/12709735