Vue | babel.config.js 配置详解
1 概述
Babel 相当于一个中介,一边是用户,另一边是浏览器。这几年,JavaScript 发生了很大的变化,许多新特性在很多浏览器里都不支持。
Babel 的主要作用就是规避这些问题,可以确保 JavaScript 代码兼容所有的浏览器,比如 IE 11。
2 Babel 的工作原理
Babel 使用 AST 把不兼容的代码编译成 ES15 版本,因为大多数浏览器都支持这个版本的 JavaScript 代码。
2.1 如何设置?
在控制台运行如下命令:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
应用程序的根目录会默认创建一个 babel.config.json
文件。Babel 将遍历 src
目录下的所有 JS 文件。
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}`
把 babel.config.json
添加到 package.json
里。
"build": "./node_modules/.bin/babel src --out-dir build"
然后,执行如下命令:
npm run build
这时,在 build
文件夹里就生成了转换代码。
2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情
- @babel/core:Babel 的所有核心功能都在这里
- @babel/cli:提供了 CLI 工具,使我们能够运行
npm run build
- @babel/preset-env:提供预置功能
3 插件
Babel 使用插件来执行代码转换,插件其实就是用 JavaScript 所写的程序片段。比如@babel/plugin-change-Arrow-function
,它的代码实现如下:
// From this
const fn = () => 1;
// Converted to this
var fn = function fn() {
return 1;
};
上面提到的 @babel/preset-env
本身包含了一组插件,可以处理手动设置插件带来的很多问题,大多数情况下能够智能处理代码。
Polyfill
Polyfill 是 JavaScript 代码片段,兼容原本不支持的旧版浏览器。Polyfill 模块包括core-js
和一个自定义的重生器运行时,以模拟完整的ES2015 +
环境。如果要使用 PolyFill 必须运行如下命令:
// Install via
npm install --save @babel/polyfill
// Add via
import "core-js/stable";
import "regenerator-runtime/runtime";
4 Babel 配置文件的优先级
从低到高依次为:
- babel.config.json
- babelrc.json
- @babel/cli
依照优先级,babel.config.json
会被 . babelrc
覆盖,依次类推。
5 Babel 有哪些值得注意的选项
以下面的配置为例:
{
"presets":
[
[
"@babel/env",
{
"targets":
{
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
}
-
如果要缩减输出代码,需要增加选项
"minified": true
-
如果要忽略某些文件,则添加
ignore: ["file or directory path"]
-
只编译特定的文件或文件夹,则添加
// For Files "only" : ["./src/some_file.js"], // For Directory "only" : ["./src"],
相关文章
- 家用路由器及NAT协议
- Java Review - 线程池使用FutureTask的小坑
- 常见的保障盘点结果准确性的方法和盘点差异的处理方法
- tsl和cas
- 利用Code39字体将文本转换为code39条形码--Java版
- .NET6新东西--struct优化
- gRPC 知多少
- Unsafe类park和unpark方法源码深入分析(mutex+cond)
- System.Text.Json自定义Conveter
- Go语言查缺补漏ing Day1
- 服装行业SCM供应链管理平台优化资源配置效率,促进企业提质增效
- multi-paxos、raft和zab协议的核心区别
- nohup command > out.file 2>&1 & 命令详解
- 微服务下rpc调用的客户端和服务端实现原理
- 偏向锁与hashcode能共存吗?
- 什么?一对多场景下的exists子查询比join连表查询快这么多?
- C++ 动态新闻推送 第38期
- C#调用即时通信IMSDK
- go+系列【数组、集合基础篇】
- 领域驱动设计之我见