Babel 是什么?
Babel 是一个工具链,可以用于把 ES6 + 语法编写的代码转换为向后兼容的 JavaScript 语法,以便可以运行在当前和旧版本的浏览器或者其他环境中。
Babel 可以做哪些事呢?
- 语法转换
- 源码转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性,如
core-js
- ......
Babel 的配置文件
配置文件类型
Babel 有两种并行的配置文件格式,可以一起使用,也可以独立使用。
- 项目范围的配置
- babel.config.json 文件,具有不同的扩展名(
.js
,.cjs
,.mjs
)
- babel.config.json 文件,具有不同的扩展名(
- 文件相关配置
- .babelrc.json 文件,,具有不同的扩展名(
.babelrc
,.js
,.cjs
,.mjs
) - package.json 带 'babel' 秘钥的文件
- .babelrc.json 文件,,具有不同的扩展名(
项目范围的配置
Babel 有一个 根目录
的概念,默认是当前的工作目录。Babel 将在此根目录自动搜索 babel.config.json
;或者用户可以使用显示的 configFile
值来覆盖默认的配置文件搜索行为。
因为项目范围的配置文件和配置文件的物理位置是分开的,所以对于必须广泛应用的配置来说,它们是理想的,甚至允许插件和预置轻松地应用于 node_module
或符号链接包中的文件,这在 Babel 6.x 中配置是相当难受的。
但是项目范围的配置缺点就是:它依赖于工作目录,如果工作目录不是 monorepo
根目录,那么使用它会更难受。
我们也可以将 configFile
设置为 false
文件相关配置
Babel 通过从正在编译的 filename
开始搜索目录结构 .babelrc.json
来加载文件。它可以运行你为包的子部分单独创建独立的配置。
文件相关的配置也被合并到项目范围的配置值之上,这使得它们可能对待特定的覆盖有用,尽管这也可以通过 overrides
来完成。
使用文件相关配置时需要注意的一些细节:
- 一旦
package.json
找到包含a
的目录,搜索将停止,因此相对配置仅适用于单个包 - 正在编译的
filename
必须在babelrcRoots
包内,否则将停止搜索 .babelrc.json
文件仅适用于它们自己的包内文件.babelrc.json
除非自己选择使用babelrcRoots
,否则包中不是Babel root
的文件将被忽略
根据使用场景来选择什么配置文件
- 如果你采用的是
monorepo
模式或者需要编译node_modules
: - 如果你的配置文件只适用项目的某个部分:
配置函数API
js配置文件可以导出一个函数,该函数将被传递给配置函数API:
module.exports = api => {
return {}
}
这个 api 对象公开了 Babel 本身从其索引模块公开的所有内容,以及配置文件特定的API,如下:
-
api.version:
- 类型: string
- 作用: 加载配置文件的 Babel 版本号
-
api.cache:
虽然使用js来配置 Babel 很好,但缺点是它让缓存更加的困难,因为每次编译文件的时候都会重新执行配置函数,这样就会导致 Babel 也需要重新执行配置中引用的任何插件和预置函数。所以 Babel 为了避免这种情况,它希望配置函数的用户可以告诉它如何在配置文件中管理缓存。方法 作用 api.cache.forever() 永久缓存计算出的配置并且不在调用该函数 api.cache.never() 不要缓存这个配置,并且每次都重新执行该功能 api.cache.using(() => process.env.NODE_ENV) 根据 “NODE_ENV” 的值进行缓存。任何时候,using 回调返回一个与预期值不同的值,将在次调用整个配置函数,并将一个新的条目添加到缓存中 api.cache.invalidate(() => process.env.NODE_ENV) 根据 “NODE_ENV” 的值进行缓存。任何时候使用回调函数返回的值不是预期的值,将在次调用整个配置函数,缓存中的所有条目都将被结果给替换 api.cache(true) 和 api.cache.forever() 一样 api.cache(false) 和 api.cache.never() 一样 -
api.env(...):
由于NODE_ENV
是一种相当常见的切换行为的方式,Babel 还专门为此设计了 API 函数。这个 API 函数被用作检查 Babel加载的envName
的快速方法,如果没有设置其他的覆盖环境,它将考虑到NODE_ENV
。它有几种形式的不同:
方法 作用 api.env() 返回当前 envName 的值 api.env("production") 如果 envName === 'production' 则返回他 true api.env(["development", "test"]) 如果 ["development", "test"].includes(envName) 为true,那么就返回true api.env(envName => envName.startsWith("test-")) 如果 env 以 "test-" 开头,那么就返回 true
-
api.caller(cb):
这个 API 用于访问传递给 Babel 的调用者数据。由于许多 Babel 实例可能以不同的caller
值运行在同一进程中,所以这个 API 被设计为自动配置api.cache
,与api.env
相同。demo:
function isBabelRegister(caller) { return !!(caller && caller.name === '@babel/register'); }; module.exports = api => { const isRegister = api.caller(isBabelRegister); return { //... } }
caller
可以用做回调函数的第一个参数。 -
api.assertVersion(range):
虽然api.version()
很有用,但是 有些时候只需要声明你的版本号就好了,如下:module.exports = api => { api.assertVersion('^7.2'); return { // ... } }
这个是根据自己的理解在加上翻译软件得出来的结果,我自己也正在学习 Babel,要是有什么不对的地方,还请各位大佬指出来,谢谢啦~
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!