最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Babel(一):Babel的配置文件

    正文概述 掘金(前端小轩)   2021-07-14   1417

    Babel 是什么?

    Babel 是一个工具链,可以用于把 ES6 + 语法编写的代码转换为向后兼容的 JavaScript 语法,以便可以运行在当前和旧版本的浏览器或者其他环境中。

    Babel 可以做哪些事呢?

    • 语法转换
    • 源码转换
    • 通过 Polyfill 方式在目标环境中添加缺失的特性,如 core-js
    • ......

    Babel 的配置文件

    配置文件类型

    Babel 有两种并行的配置文件格式,可以一起使用,也可以独立使用。

    • 项目范围的配置
      • babel.config.json 文件,具有不同的扩展名(.js, .cjs, .mjs)
    • 文件相关配置
      • .babelrc.json 文件,,具有不同的扩展名(.babelrc, .js, .cjs, .mjs)
      • package.json 带 'babel' 秘钥的文件

    项目范围的配置

    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 的文件将被忽略

    根据使用场景来选择什么配置文件

    1. 如果你采用的是 monorepo 模式或者需要编译 node_modules
    2. 如果你的配置文件只适用项目的某个部分:

    配置函数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' 则返回他 trueapi.env(["development", "test"])如果 ["development", "test"].includes(envName) 为true,那么就返回trueapi.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,要是有什么不对的地方,还请各位大佬指出来,谢谢啦~


    起源地下载网 » Babel(一):Babel的配置文件

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元