Babel 是一个 JavaScript 的转译器。它的主要功能就是把 ES2015+ 的代码转换为 ES5 或更低版本的 JavaScript 代码。有了 Babel,您就可以使用最新的 JavaScript 语法,不用太担心浏览器的兼容问题。

这篇文章只是简单的 Babel 使用教程,不包含 Webpack 相关的配置。

Babel 有网页版和 Node 开发的安装版,这里主要写的是安装版。

如果要使用网页版可以访问:https://babeljs.io/repl/ ,一些简单的转换也可以用网页版。

项目初始化

这里的初始化主要就是需要生成一个 package.json 文件,可以在命令行输入:

npm init -y

如果不包含 -y 的话,需要手动输入项目的基本信息。

初始化完成后就可以安装 Babel 了。

安装

首先需要安装 babel/cli,babel/cli 的功能就是通过命令行编译文件。

在当前项目安装:

npm install --save-dev @babel/cli

一般建议在项目中安装,这样可以在不同的项目中使用不同版本的 Babel。如果要在全局安装可以把 --save-dev 改为 -g

安装 babel/core:

npm install --save-dev @babel/core

babel/core 的主要功能就是调用 Babel 的 API 转码。

安装完 babel/cli 和 babel/core 后,项目根目录下的 package.json 文件中应该会多出如下内容:

{
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4"
  }
}

Babel 把编译功能拆分成了很多插件,所以即便安装了 babel/cli 和 babel/core 也还是不能使用,还需要继续安装插件。

安装 babel-preset-env:

npm install --save-dev @babel/preset-env

Babel 的插件有很多,如果您不了解 ES6 和各种浏览器的兼容性的话,很难选择插件。babel-preset-env 就是一个集成了很多常用插件的模块。安装了 babel-preset-env,您就不用去考虑各种浏览器的兼容问题了。

配置

安装完 babel-preset-env 后,您还是不能立刻使用 Babel 转码,还需要配置 babel-preset-env。

在项目根目录下建立一个 .babelrc 文件,文件没有任何后缀。

.babelrc 中输入如下的配置信息:

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

保存后就可以使用 Babel 了。

使用

编译后在终端输出代码:

npx babel jsFile.js

其中的 jsFile.js 就是文件名。

下面是一个 ES6 的 JS 文件:

const a = 1;
let f = txt => {
    return txt;
}

使用 npx babel 编译后终端输出了:

var a = 1;

var f = function f(txt) {
  return txt;
};

编译后输出 JS 文件:

npx babel jsFile.js --out-file newJsFile.js

其中的 jsFile.js 是要编译的 JS 文件,newJsFile.js 是编译后输出的 JS 文件。

如果我要让 src 目录下的 index.js 编译后在 dist 目录下输出 index.js 就可以这样写:

npx babel src/index.js --out-file dist/index.js

其中的 --out-file 也可以简写为 -o

如果需要监听文件,当文件内容改变时自动编译,可以使用:

npx babel jsFile.js --watch --out-file newJsFile

主要就是加一个 --watch--watch 也可以简写为 -w

如果要编译整个目录中的文件可以使用:

npx babel src --out-dir dist

上面命令的意思就是编译 src 目录下的所有文件,然后输出到 dist 目录。

如果要把整个目录下的文件编译为一个文件可以使用:

npx babel src --out-file newJsFile.js

其中的 src 是目录名称,newJsFile.js 是编译后的文件名。

babel-polyfill

下面是一个包含 Map 数据结构的 ES6 代码:

const m = new Map([
    ['cn', '中国'],
    ['us', '美国'],
    ['uk', '英国']
]);
m.set('jp', '日本');
console.log(m.get('cn'));

使用 Babel 转换后如下:

"use strict";

var m = new Map([['cn', '中国'], ['us', '美国'], ['uk', '英国']]);
m.set('jp', '日本');
console.log(m.get('cn'));

用 IE11 运行一下,控制台输出了 undefined

Babel 只能转换语法部分,不能转换新增的 API,也就是说 ES6 中的 SetMap 之类的都是无法转换的。

如果需要转换 API 部分还需要用到 babel/runtime 或 babel/polyfill。因为我这里没有用到 Webpack ,所以就直接在 HTML 中引入 babel-polyfill.js

可以直接使用 https://www.bootcdn.cn/babel-polyfill/ 上面的 CDN 引入 babel-polyfill,也可以下载 JS 文件。压缩后的 babel-polyfill.js 差不多在 98k 左右。

引入 babel-polyfill.js 后,ES6 中新增的一些 API 就可以使用了。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/835/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji