一分钟入门 Babel（下一代 JavaScript 语法的编译器）

2021-12-01 09:07:03 浏览数 (1)

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。

ES6转ES5（第一种）

初始化项目
代码语言：javascript复制
npm init --y
安装依赖
代码语言：javascript复制
npm install babel-cli -D
代码语言：javascript复制
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。

代码语言：javascript复制
// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}
编辑package.json

我们需要自己在scripts字段里添加命令：

  • build-t ：单独编译某个文件
  • build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建）
  • build-o：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建，可以指定文件名）
代码语言：javascript复制
{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-t":"babel index.js --presets es2015",
    "build-d": "babel src -d lib --presets es2015",
    "build-o":"babel src/index.js -o dist/index.js --presets es2015"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}
启动编译
代码语言：javascript复制
npm run <这里是scripts字段的命令>

下面是编译后的es5文件。

代码语言：javascript复制
"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

ES6转ES5（第二种）

其实跟第一种差不多。

初始化项目
代码语言：javascript复制
npm init --y
安装依赖
代码语言：javascript复制
npm install babel-cli -D
代码语言：javascript复制
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。

代码语言：javascript复制
// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}
在项目中创建并编辑.babelrc文件

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

代码语言：javascript复制
{
    "presets": ["es2015"],
    "plugins": []
}
编辑package.json

我们需要自己在scripts字段里添加命令，命令内容与第一种方法的一样，这里只不过省了--presets es2015。

代码语言：javascript复制
{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "build":"babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}
启动编译
代码语言：javascript复制
npm run build

下面是编译后的es5文件。

代码语言：javascript复制
"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

ES6 转ES5

这里 ES6 说的是ES6、ES7、ES8等。

初始化项目
代码语言：javascript复制
npm init --y
安装依赖
代码语言：javascript复制
npm install babel-cli -D
代码语言：javascript复制
npm install babel-preset-env -D
在项目中创建并编辑ES6文件

这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。

代码语言：javascript复制
// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}
在项目中创建并编辑.babelrc文件

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

代码语言：javascript复制
{
    "presets": ["env"]
}
编辑package.json

命令内容不只是这一个，根据你需求写，其他命令可以看上面的ES6转ES5（第一种）。

代码语言：javascript复制
{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "build": "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}
启动编译
代码语言：javascript复制
npm run build

下面是编译后的es5文件。

代码语言：javascript复制
"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

结语

本篇主要介绍了ES6转ES5的两种方法以及ES6 怎样转ES5。不过现在大部分使用ES6 怎样转ES5比较多，主要让大家体验下升级的感觉。

打包 javascript ecmascript

0 人点赞