babel 的简单使用

之前在项目中使用.balelrc文件，但是一直不知道具体怎么使用，就知道可以将es6语法转码为es5语法。

今天就简单的做个例子，也算是记录一下困扰了好久的问题。

转码步骤：

• 首先在项目的目录中安装Babel

• 创建配置文件 .balelrc ，存放在项目的根目录下

• 利用Babel提供的命令行工具@babel/cli，用命令行进行转码

1.1 安装Babel，可以直接使用命令行安装。

npm install --save-dev @babel/core

1.2 配置文件 .babelrc

该文件用来设置转码规则和插件的，基本格式为：

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

presets字段设定转码规则，官方提供一下的规则集，可以按需加载

# 最新转码规则
$ npm install --save-dev @babel/preset-env

# react 转码规则
$ npm install --save-dev @babel/preset-react

然后将这些规则加入.babelrc文件

{
  "presets":[
    "@babel/env",
    "@babel.preset-react"
  ],
  "plugins":[]
}

1.3 命令行转码

Babel 提供命令行工具@babel/cli，用于命令行转码。

npm install --save-dev @babel/cli

基本用法：

# 转码结果输出到标准输出
$ npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib

# -s 参数生成source map文件
$ npx babel src -d lib -s

这里附上自己转码配置文件和转码前后文件内容和转码命令（就是自己玩了一下，嘿嘿嘿~）

其实网上的资料还是很多滴，就是自己想要知道怎么自己转码，其实用webpack也是比较简单的。

首先，安装babel-preset-env包：npm install –save-dev babel-preset-env

在根目录下创建.babelrc文件。

为了检验我们的配置是否成功，我们再安装babel-cli包：npm install --save-dev babel-cli，然后我们在根目录下创建一个babel_test文件用于测试，如下：

let arr = [1, 2, 3];
console.log([...arr]);

并在package.json文件中添加npm脚本：

"scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "babel": "babel ./babel_test/test.js -o ./babel_test/res.js"
  },

该脚本的作用就是将test.js进行转码，并将转码后的内容存储到res.js文件中。

在终端执行npm run babel则会在相同目录下生成res.js:

"use strict";
var arr = [1, 2, 3];
console.log([].concat(arr));

该文件已经转码成功，说明我们的配置是正确的。