Babel详解

简介

       Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

安装

• 控制台命令窗口执行命令：npm install -g babel-cli。
• 还可以使用阿里云镜像，执行命令：cnpm install -g babel-cli，下载速度更快。
• 查看是否安装成功：babel --version，即查看安装的babel版本。

使用

1. 创建babel文件夹（以下的命令都是在这个文件夹中执行）
2. 初始化项目：npm init -y
3. 创建src/example.js文件，下面是一段ES6代码:

//ES6
let name="THU";
const title="大学";
let arr=[1,2,3,4,5,6,7,8,9,10];
let arr2=arr.map(obj=>obj*2);
console.log(arr2);
console.log(name);
console.log(title);

4. 配置 .babelrc 文件，这是babel的配置文件，存放在项目的根目录下，该文件用来设置转码规则和插件，其基本格式如下：

{
  "presets": [...],
  "plugins": [...]
}

• presets字段设置转码规则，将es2015加入到.babelrc，

{
  "presets": ["es2015"],
  "plugins": []
}

5. 安装转码器，在项目中安装，执行命令：

    cnpm install --save-dev babel-preset-es2015
   

6. 转码（两种方法）

   • 执行命令：babel src -d dist，将src目录下的所有源文件全部编译成对应的es2015文件，会在src同级目录中创建一个dist目录，将编译好的文件放在dist目录中。

   • 自定义脚本，在package.json文件中进行配置

     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev":"babel src -d dist"
      },
   

   再执行命令：npm run dev，这里的“dev”也就是在json文件中配置的键的名称。

目录结构如下：