一、Babel 解决什么问题?
浏览器无法运行 ECMAScript 2015+
、JSX
、TypeScript
等语法编写的脚本代码。
ECMAScript 2015+
:ECMAScript 在2015年发布新的 JavaScript 语法;JSX
:用在 React 框架中脚本语言;详细说明,看这里!TypeScript
: JavaScript 的扩展语法,用于数据类型、逻辑检查等;详细说明,看这里Babel 可以把这些代码 转换成 浏览器可以运行的 JavaScript 代码。ES2015、TypeScript、JSX 等不仅可以提升开发效率,还可以解决原生JavaScript语法无法处理的一些编程问题。
用 Babel 进行代码转换,需要涉及三个模块:【运行程序】+【配置】+【Plugins/Presets】。
用 ES2015 语法编写的项目,怎么用 Babel 转换成浏览器可以运行的代码?
[1, 2, 3].map(n => n + 1); 复制代码
3. 新建文件夹 learn-babel/lib
,用于放置转换后代码;
4. 新建配置文件 learn-babel/babel.config.json
,复制下面配置信息
{ "presets": [ "@babel/preset-env" ] } 复制代码
5. 安装 Babel
cd learn-babel npm install --save-dev @babel/core @babel/cli @babel/preset-env 复制代码
6. 转换代码(下面两种方式都可以)
方法一 ./node_modules/.bin/babel src --out-dir lib
方法二 npx babel src --out-dir lib 复制代码
7. 查看结果
可以在 lib 目录下看到,有个新文件 test.js
生成,其中 箭头函数的新语法 被转换为 普通函数 。
"use strict"; [1, 2, 3].map(function (n) { return n + 1; }); 复制代码
包含 Babel 所有核心功能,还提供了API,可在代码中直接调用进行代码转换。
# 安装
npm install --save-dev @babel/core
# 使用
const babel = require("@babel/core");
babel.transformSync("code", optionsObject);
复制代码
一个可执行程序,可以在终端中直接调用进行代码转换;
# 安装
npm install --save-dev @babel/core @babel/cli
# 转换src目录下用ES2015语法代码,输出到lib目录
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
# ./node_modules/.bin/babel 可以用 npx 代替
npx src --out-dir lib --presets=@babel/env
复制代码
Plugins 和 Presets 告诉 Babel 应该转换哪些代码。一个Plugin实现一个代码转换功能,多个Plugin组合在一起就称之为Presets。
使用 plugin-transform-arrow-functions 插件转换 ES2015+ 中的箭头函数语法为浏览器可执行的代码。
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
复制代码
一个Plugin实现一个代码转换功能,多个Plugin组合在一起就称之为Presets。官方提供了 4个 Presets,可以直接使用。
功能:用于转换 ES2015+ 所有语法。
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
复制代码
功能 :用于 React 项目。
功能 :用于转换 TypeScript 代码。
功能 :用于转换 flow 代码。
配置文件分为两种:基于项目的配置文件、基于文件的项目配置。
.js
, .cjs
, .mjs
, 下面是.json
后缀的配置格式: { "presets": [...], "plugins": [...] } 复制代码
.babelrc.json
,还有其他可用后缀 :.babelrc
, .js
, .cjs
, .mjs
。package.json
文件中配置 babel,如下: { "name": "my-package", "version": "1.0.0", "babel": { "presets": [ ... ], "plugins": [ ... ], } } 复制代码
module.exports = function (api) { api.cache(true); const presets = [ ... ]; const plugins = [ ... ]; return { presets, plugins }; } 复制代码
配置文件的选项分为两个类型:
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。