esbuild 是否提供类似于 webpack 中的resolve.alias 选项的功能？

Question

Esbuild是否在WebPack中提供了诸如Resolve.alias选项之类的功能？

const path = require('path');
    
module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

现在，导入时，而不是使用相对路径：

import Utility from '../../utilities/utility';

您可以使用别名：

import Utility from 'Utilities/utility';

Answer 1

Esbuild现在确实提供了配置中的“别名”，您可以在其中设置这些别名引用。

在此处查看 esbuild别名

Answer 2

esbuild 目前不提供解析别名的专用方法，但支持 tsconfig.json 中的路径。
https://github.com/evanw/esbuild/issues/2191

Answer 3

Esbuild在构建选项中没有类似的选项，但它提供了控制通过插件解决路径的方法。您可以写简单自己的插件或使用 esbuild-plugin-alias

Answer 4

是的，您可以，但您必须确保启用 bundle 选项。

如果您使用的是 JavaScript，请创建 jsconfig.json 文件；如果您使用的是 TypeScript，请创建 tsconfig.json 文件。

并使用 "paths" 编译器选项，如下所示：

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "ESNext",
    "moduleResolution": "Bundler", // << you should enable this
    "esModuleInterop": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "paths": {
      "@/*": ["./src/*"] // << enable this (or your own)
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules/**/*"]
}

然后，在运行 esbuild 时，确保添加 --bundle 标志：

// package.json
"scripts": {
  "build": "esbuild --bundle ./index.ts # or for js, index.js"
}

$ npm run build

这将解析如下导入：

import log from '@/tools'

致：

import log from '../../../tools'

请注意，仅当您使用 --bundle 标志时才支持此功能，否则它将不会解析任何别名，并且在构建过程中不会向您显示任何警告或错误。

如果您只为后端编写代码，并且您不打算捆绑您的代码，因为您根本不在乎，那么，更好的解决方案是使用外部插件，或者第三方 npm 包，例如 ts-alias ，这非常酷& ;便于使用。

如果您正在为前端执行此操作，并且没有使用其他捆绑器（例如 webpack 或 SWC），并且使用 esbuild 的主要目的是捆绑代码，那么恭喜您已准备好开始。