Babel入门

小半 • 2023年1月18日下午12:07 • 技术随笔 • 阅读 168

什么是Babel？

Babel 是一个 JavaScript compiler

Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：

转换语法
Polyfill 目标环境中缺少的功能（通过如 core-js 的第三方 polyfill）
源代码转换(codemods)

简单来说把JavaScript中es2015/2016/2017等的新语法转化为es5，让低端运行环境（如浏览器和node）能够认识并执行。

Babel特性

可插件化

Babel 是用 plugins 构建的。你可以使用现有 plugins 编写自己的转换管道，或编写自己的 plugins。通过使用或创建一个 preset 轻松使用一组插件。

可调试

支持 Source map，因此你可以轻松调试编译过的代码。

规范性

Babel 试图尽可能地遵循 ECMAScript 标准。作为性能的折衷方案，它可能还具有一些特定的选项，使其更符合规范。

可压缩

Babel 尝试使用尽可能少的代码而不依赖于庞大的运行时环境。

有些情况可能很难达到，因此为了保证可读性、文件大小以及（运行）速度，会牺牲一些合规性，即提供了 “assumptions” 选项。

Babel使用

安装babel

# 安装babel
npm init --y
npm install -g babel-cli
npm install --save babel-preset-es2015
# es6以后所有版本都适用
npm install --save babel-preset-env -D

使用语法

# 执行文件转换es5语法 不输出文件
babel src/js1.js --presets es2015

# 执行文件转换es5语法 输出文件
babel src/js1.js -o src/js2.js --presets es2015

# 执行文件夹转换es5语法
babel src -d dist --presets es2015

# script 加入 babel build
"scripts":{
    "build": "babel src -d dist"
}

# 新建 .babelrc. 文件
{
    "presets":["es2015"],
    "plugins":[]
}
# es6以后所有版本都适用
{
    "presets":["env"]
}

# 构建
npm run build