BabelJS-将ES6模块转换为ES5

简介

BabelJS是支持将ES6模块转换为ES5的编译器。ES6是ECMAScript的一个版本，包含了JavaScript中一些重要的新特性。但是，由于不是所有的浏览器都支持ES6，所以babelJS可以用来将ES6代码转换成ES5代码。

BabelJS基本使用

前提条件：在本地安装了node.js和npm

步骤1：创建一个文件夹，然后打开终端，进入该文件夹，输入以下命令：

npm init

该命令将会在文件夹中创建一个"package.json"文件。

步骤2：安装babel-cli和babel-preset-env：

npm install --save-dev babel-cli babel-preset-env

步骤3：创建一个.babelrc文件，在该文件中添加以下内容：

{
  "presets": ["env"]
}

步骤4：编写你的ES6代码，然后将其放到一个文件中（比如说是test.js文件）。

//这是ES6代码
let add = (a, b) => a + b;

步骤5：将你的ES6代码转换成ES5代码。使用以下命令：

babel test.js --out-file output.js

转换后的ES5代码将会出现在output.js文件中。

//这是ES5代码
"use strict";

var add = function add(a, b) {
  return a + b;
};

步骤6：在html文件中引入转换后的ES5代码：

<script type="text/javascript" src="output.js"></script>

你的ES6代码现在已经被转换成ES5代码了，可以通过常规方法在浏览器中运行。