1分钟了解js编译器Babel的使用（附demo）

什么是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