安装与使用

使用 babel-cli

Babel 自带了一个内置的 CLI 命令行工具,可通过命令行编译文件。

安装:

yarn add @babel/core @babel/cli @babel/preset-env

package.json 中增加:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d lib"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  }
}

上面的 build, 将把 src 中的源文件编译到 lib

增加 babel 配置文件 .babelrc

{
  "presets": ["@babel/preset-env"]
}

测试:

创建 src/test.js

let func = a => {
  console.log(a);
};

运行 yarn build, 可以看到新增了 lib/test.js

"use strict";
var func = function func(a) {
  console.log(a);
};

可以看到, 已经将 ES6 代码编译为 ES5 了

常用命令

# 编译文件, 输出到标准输出设备(stdout)
npx babel script.js
# 输出到文件
npx babel script.js --out-file script-compiled.js
# 监测文件修改
npx babel script.js --watch --out-file script-compiled.js
# 输出源码映射表
npx babel script.js --out-file script-compiled.js --source-maps
# 输出内联源码映射表
npx babel script.js --out-file script-compiled.js --source-maps inline
# 编译整个目录
npx babel src --out-dir lib
# 编译整个 src 目录下的文件并将输出合并为一个文件
npx babel src --out-file script-compiled.js
# 忽略某些文件
npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"
# 拷贝不需要编译的文件
npx babel src --out-dir lib --copy-files
# 通过 stdin 和管道(pipe)将文件内容传递给 babel 命令,并将编译结果输出到 script-compiled.js 文件
npx babel --out-file script-compiled.js < script.js
# 使用插件
npx babel script.js --out-file script-compiled.js --plugins=@babel/proposal-class-properties,@babel/transform-modules-amd
# 使用预设
npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow
# 忽略项目中的 .babelrc 配置文件,并通过命令行参数执行定制化的构建流程
npx babel --no-babelrc script.js --out-file script-compiled.js --presets=es2015,react

在webpack中使用

安装 babel-loader

yarn add babel-loader

webpack.config.js 中添加

module.exports = {
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
}

同样还是得配置 .babelrc

{
  "presets": ["@babel/preset-env"]
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress