Babel详解

2024-02-08 15:42:58

简介

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

安装

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

使用

创建babel文件夹（以下的命令都是在这个文件夹中执行）
初始化项目：npm init -y
创建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);

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

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

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

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

安装转码器，在项目中安装，执行命令：
```
 cnpm install --save-dev babel-preset-es2015
```
转码（两种方法）
- 执行命令：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文件中配置的键的名称。