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));

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

巴特西

babel 的简单使用

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

1.2 配置文件 .babelrc

1.3 命令行转码

最新文章

热门文章