• esbuild中文文档-路径解析配置项(Path resolution - Alias、Conditions)



    哈喽,大家好!我是「励志前端小黑哥」,我带着最新发布的文章又来了!

    老规矩,小手动起来~点赞关注不迷路!

    esbuild简单介绍

    esbuild为了突破了JavaScript语言的瓶颈,采用了Go语言编写,构建速度与同代码量下的webpack对比提升在10倍以上,开创了构建工具性能的新时代。

    它的中文文档,本人正在不断的更新完善中,欢迎大家关注阅读!

    路径解析配置项 Path resolution

    别名 Alias

    Supported by: Build

    此功能允许您在打包时用一个包替换另一个包。以下示例将包oldpkg替换为包newpkg

    esbuild app.js --bundle --alias:oldpkg=newpkg
    
    • 1

    这些替换首先会发生在esbuild所有的路径解析逻辑之前。此功能的一个使用场景是使用浏览器兼容包替换仅Node环境可使用的包,从而替换那些您无法控制的第三方代码,。

    请注意,当使用Alias替换导入路径时,生成的导入路径将在工作目录中解析,而不是在包含具有导入路径的源文件的目录中解析。如果需要,可以使用Working directory功能设置esbuild所使用的工作目录。

    条件解析 Conditions

    Supported by: Build

    此功能控制如何解析package.json中的exports字段。可以使用conditions设置添加自定义条件。您可以根据需要指定任意多个条件,这完全取决于包的作者。Node目前只推荐使用developmentproduction的自定义条件。以下是添加自定义条件custom1custom2的示例:

    esbuild src/app.js --bundle --conditions=custom1,custom2
    
    • 1

    conditions是如何工作的

    contitions允许您在不同的情况下将相同的import路径重定向到不同的文件位置。包含条件和路径的重定向Map存储在包的package.json文件的exports字段中。例如,下面这个例子将使用importrequired条件将require('pkg/foo')重新映射到pkg/required.cjs,并将import 'pkg/foo'导入映射到pkg/imported.mjs

    {
      "name": "pkg",
      "exports": {
        "./foo": {
          "import": "./imported.mjs",
          "require": "./required.cjs",
          "default": "./fallback.js"
        }
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    conditions配置按照它们在JSON文件中出现的顺序进行检查。所以上面的例子有点像下面这个流程:

    if (importPath === './foo') {
      if (conditions.has('import')) return './imported.mjs'
      if (conditions.has('require')) return './required.cjs'
      return './fallback.js'
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    默认情况下,有五种具有特殊含义的条件内置到esbuild中,并且不能禁用:

    • default

    这种情况始终处于激活状态。它旨在排在最后,并允许您在没有其他条件适用时提供后备方案。当您在node中以本地方式运行代码时,此条件也处于活动状态。

    • import

    只有当导入路径来自ESMimport语句或import()表达式时,此条件才处于活动状态。它可用于提供ESM特定的代码。当您在node中以本地方式运行代码时(但仅在ESM上下文中),此条件也处于活动状态。

    • require

    只有当导入路径来自CommonJSrequire()调用时,此条件才处于活动状态。它可以用来提供CommonJS特定的代码。当您在node中以本地方式运行代码时(但仅在CommonJS上下文中),此条件也是活动的。

    • browser

    只有当esbuildplatform参数设置为browser时,此条件才处于活动状态。它可以用于提供特定于浏览器的代码。当您在node中以本地方式运行代码时,此条件不处于活动状态。

    • node

    只有当esbuildplatform参数设置为node时,此条件才处于活动状态。它可以用于提供特定的nodejs代码。当您在node中以本地方式运行代码时,此条件也处于活动状态。

    platform设置为browsernode且未配置自定义条件时,还会自动包含以下条件。如果配置了任何自定义条件(甚至是空列表),则此条件将不再自动包含:

    • module

    此条件可用于告诉esbuild为给定的import路径选择合适的ESM变体,以便在打包时提供更好的树抖动tree shaking。当您在node中以本地方式运行代码时,此条件不处于活动状态。它是esbuild打包器特有的,灵感来源源于Webpack

    请注意,当您使用requireimport条件时,您的包可能会多次出现在打包文件中!这是一个小问题,除了导致打包文件膨胀之外,可能会由于代码状态的重复副本而导致错误。这通常被称为双包危害

    避免双包危害的一种方法是将所有代码作为CommonJS放入require条件中,并使导入条件仅为一个简单的ESM包装器,该包装器在包上调用require,并使用ESM语法重新导出包。然而,这种方法不能提供良好的树抖动,因为esbuild不会对CommonJS模块进行树抖动。

    避免双包危害的另一种方法是使用打包器特定的module条件来指导打包器始终加载包的ESM版本,同时让node始终回退到包的CommonJS版本。importmodule都用于ESM,但与import不同的是,即使使用require调用加载了import路径,module条件也始终处于活动状态。这在打包器中很好地工作,因为打包器支持使用require加载ESM,但它不能与node一起工作,因为node故意不使用require实现加载ESM

    结语

    笔者根据esbuild文档搭建了一套简洁的ts开发脚手架工程,编译速度非常快!脚手架还整合了eslint,另一篇文章还附带了调试教程,需要的朋友看这里:esbuild配合vscode搭建的ts开发环境,这编译速度,真香

    另外,esbuild中文文档专栏,本人目前正在翻译整理,关注我,有最新的翻译文档会第一时间通知你!

    (本文完)

    励志前端小黑哥,全网唯一账号!
    关注我,带你了解更多前端知识!

  • 相关阅读:
    MyBatis源码基础-常用类-别名注册器
    整合小分子物质KGN的壳聚糖-透明质酸水凝胶/基于琥珀酰壳聚糖-氧化透明质酸的水凝胶的研究制备
    【数据库】之MYSQL基本语法
    [SuperSocket2.0]SuperSocket 2.0从入门到懵逼
    25 avl树
    【Linux】系统安装
    linux 安装tomcat 图文详解全过程
    Java的Object类和深拷贝和浅拷贝(面试题)
    数据结构-插入排序实现
    jQuery 学习笔记
  • 原文地址:https://blog.csdn.net/qq_21197033/article/details/133013367