【入门】你连Babel都不会配?那插件不成乱装了

简介: 大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

1. 前言

大家好,我是小鑫同学。一位从事过Android开发混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

如果你有项目搭建的需求,工具链开发的需求,那么 Babel 目前仍是一个前端工程师高频使用的产品,在各浏览器厂商纷纷拥抱W3C标准的时候还是会遇到需要将 ES2015+ 的语法进行降级,使得可以在低版本的浏览器及其他环境中正常使用。

2. Babel 能搞什么?

Babel 作为一款工具链产品可以辅助我们在JavaScript 编写时更放心的去使用一些较新的或最新的语法,对于浏览器或其他环境不能很好兼容的事情全部交给 Babel 自行处理,所以说 Babel 在我们编码的过程中主要起到了语法转换Polyfill 的功能。

3. MVP环境配置:

这里的 MVP 指的是产品理论,指的是最简可行化分析,我们需要配置一个满足最基本 Babel 运行的项目环境。

依赖项

作用

@babel/core

babel 运行的核心模块。

@babel/cli

babel 配套使用的命令行工具。

@babel/plugin-transform-arrow-functions

语法转换插件的其中之一,用于将箭头函数转为普通函数。

我们需要使用命令行工具来启动 babel 核心模块进行工作,其中所做的具体工作有各种各样的插件预设的集合来提供,当官方和社区的插件和预设无法满足我们的需求时就需要我们自定义插件来完成,这个我们先来演示一个 MVP 级别的箭头函数到普通函数转换~

3.1 初始化项目

3.1.1 初始化目录:

mkdir babel-study && pnpm init

3.1.2 安装各依赖:

  1. pnpm add -D @babel/core
  2. pnpm add -D @babel/cli
  3. pnpm add -D @babel/plugin-transform-arrow-functions

3.2 配置文件和编译命令

3.2.1 插入 babel 编译命令:

编译 src 目录下的 js 文件并输出到 output 目录

{

   "build": "./node_modules/.bin/babel ./src -d output"

}

3.2.2 创建 babel 配置文件:

创建一个后缀名为 .js 的配置文件(babel.config.js)并配置插件列表预设列表的使用后面会讲到:

const presets = [];


const plugins = ["@babel/plugin-transform-arrow-functions"];


module.exports = { presets, plugins };

3.3 插入源码并编译:

3.3.1 在 src 目录插入下面的源码:

如下代码包含了块级作用域变量的定义、箭头函数和模板字符串使用

const say = (value) => {

 console.log(`hello ${value}`);

};

3.3.2 执行编译命令并预览结果:

执行 pnpm build 命令后在终端将输出 Babel 为我们处理成功了一个文件的提示:

使用@babel/plugin-transform-arrow-functions处理后的结果:

const say = function (value) {

 console.log(`hello ${value}`);

};

3.4 处理掉更多的语法:

3.4.1 转换块级变量定义:

安装并配置插件:@babel/plugin-transform-block-scoping

const presets = [];


const plugins = [

 "@babel/plugin-transform-arrow-functions",

 "@babel/plugin-transform-block-scoping",

];


module.exports = { presets, plugins };

转换结果:

var say = function (value) {

 console.log(`hello ${value}`);

};

3.4.2 转换模板字符串:

安装并配置引入插件:@babel/plugin-transform-template-literals

const presets = [];


const plugins = [

 "@babel/plugin-transform-arrow-functions",

 "@babel/plugin-transform-block-scoping",

 "@babel/plugin-transform-template-literals",

];


module.exports = { presets, plugins };

转换结果:

var say = function (value) {

 console.log("hello ".concat(value));

};

3.4.3 更优雅的处理方式:

我们分别使用不同的插件来处理掉了不同的语法,ES2015+提供的语法有不少,我们虽然可以一个个插件安装来处理但不是最优雅的方式,这里就需要用到预设,我们可以认为预设就是一组插件的集合。

@babel/preset-env就是Babel 官方维护的 JavaScript 转换预设,我们接下来看一下预设的使用:

  1. 安装依赖:pnpm add -D @babel/preset-env;
  2. 配置预设并取消插件列表:

const presets = [

   [

       "@babel/preset-env", // 整合了尽可能全的JavaScript语法转换的预设

   ],

];


const plugins = [

//   "@babel/plugin-transform-arrow-functions",   // ① 箭头函数

//   "@babel/plugin-transform-block-scoping",     // ② 块级作用域

//   "@babel/plugin-transform-template-literals", // ③ 模板字符串

];


module.exports = { presets, plugins };

  1. 转换结果:

"use strict";


var say = function say(value) {

 console.log("hello ".concat(value));

};

4. 支持 TypeScript?

4.1 在 src 目录下插入下面的源码:

const person: {

 name: string;

 age: number;

} = {

 name: "TypeScript",

 age: 16,

};

console.log(person?.name);

4.2 安装并配置@babel/preset-typescript

const presets = [

 [

   "@babel/preset-env", // 整合了尽可能全的JavaScript语法转换的预设

 ],

 "@babel/preset-typescript",

];


const plugins = [];


module.exports = { presets, plugins };

4.3 添加一条新的编译scripts:

通过增加-x '.ts'参数来支持 babel 识别 .ts 文件:

{

   "build:ts": "./node_modules/.bin/babel ./src -d output -x '.ts'"

}

4.4 转换结果:

"use strict";


var person = {

 name: "TypeScript",

 age: 16

};

console.log(person === null || person === void 0 ? void 0 : person.name);

5. 总结

  1. Babel 官网提供了 ES2015+ 各语法的演示,我们可以对照各个语法和对应的插件来感受 Babel 语法转换的奥妙~
  2. 当我们与其它的构建系统框架语言 API搭配使用时还需要更多的配置来支持,可以在 Using Babel 查看。
  3. 我们还可以使用 REPL 来在线查看语法的转换。

本文项目已推送至GitHub,欢迎克隆演示:git clone git@github.com:OSpoon/babel-study.git


如果看完觉得有收获,欢迎点赞、评论、分享支持一下。你的支持和肯定,是我坚持写作的动力~

最后可以关注我@小鑫同学。欢迎点此扫码加我微信fe-xiaoxin交流,共同进步(还可以帮你fix🐛)~

相关文章
|
3月前
|
前端开发
Vite——如何配置使用sass
Vite——如何配置使用sass
213 0
|
17小时前
|
JavaScript 前端开发
Babel 插件的作用是什么?
Babel 插件的作用是什么?
|
17小时前
|
JavaScript 前端开发
如何在项目中集成 Babel?
如何在项目中集成 Babel?
7 3
|
14天前
|
JavaScript 前端开发
将 Babel 插件应用于实际项目中
【10月更文挑战第25天】如果在应用插件过程中出现问题,可以检查 Babel 配置是否正确、插件的依赖是否安装完整、构建工具的集成是否正确等,逐步排查和解决问题。通过以上步骤,就可以将 Babel 插件成功应用到实际项目中,实现特定的代码转换和功能增强。
|
16天前
|
开发框架 自然语言处理 JavaScript
babel 原理,怎么写 babel 插件
【10月更文挑战第23天】要深入理解和掌握如何编写 Babel 插件,需要不断实践和探索,结合具体的项目需求和代码结构,灵活运用相关知识和技巧。你还可以进一步扩展和深入探讨各个方面的内容,提供更多的实例和细节,以使文章更加丰富和全面。同时,关注 Babel 插件开发的最新动态和研究成果,以便及时了解其发展和变化。
|
14天前
怎么写的 babel 插件
【10月更文挑战第25天】我们可以编写一个简单的Babel插件,并根据实际需求对其进行扩展和修改,以满足特定的代码转换需求。在实际编写Babel插件时,还需要对Babel的AST结构和各种节点类型有更深入的了解,以便能够更灵活地处理各种复杂的代码转换场景。
|
自然语言处理 前端开发 JavaScript
Babel 的工作原理以及怎么写一个 Babel 插件
Babel 的工作原理以及怎么写一个 Babel 插件
208 0
|
Web App开发 JavaScript 前端开发
VsCode 常用好用插件/配置+开发Vue 必装的插件
VsCode 常用好用插件/配置+开发Vue 必装的插件
273 0
Vscode如何配置自己的eslint实现自动格式化代码
Vscode如何配置自己的eslint实现自动格式化代码
|
JavaScript 前端开发 Go
esbuild 配置开发环境
esbuild 相信在使用过vite的同学都知道,vite是开发环境使用的是esbuild来进行编译代码的,生成环境打包使用的是rollup,想看rollup的同学,可以查看我的往期文章。(实战 rollup 第一节入门) (rollup 实战第二节 搭建开发环境)(rollup 实战第二节 搭建开发环境)
esbuild 配置开发环境