Webpack：与 esmodules 捆绑 typescript 模块别名

Question

我开发了一个带有 Typescript 和 ES-Modules 的 npm 模块。

这是tsconfig.json ，您可以在其中看到有一个路径别名。 它位于/source文件夹中。

{
    "compilerOptions": {
        "moduleResolution": "Node16",
        "module": "Node16",
        "target": "ES2015",
        "lib": [
            "ES2022"
        ],
        "resolveJsonModule": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./source/*"
            ],
            "@": [
                "./source"
            ],
            "@src/*": [
                "./source/*"
            ],
            "@src": [
                "./source"
            ],
            "@test/*": [
                "./test/*"
            ],
            "@test": [
                "./test"
            ]
        },
        "outDir": "./dist"
    },
    "include": [
        "source",
        "test"
    ]
}

这是webpack.config.mjs ，确实是一个 esmodule。 它位于根/

import { fileURLToPath } from 'node:url';
import path from 'node:path';

import nodeExternals from 'webpack-node-externals';
import BundleDeclarationsWebpackPlugin from 'bundle-declarations-webpack-plugin';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import ResolveTypescriptPlugin from 'resolve-typescript-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    // experiments: {
    //     outputModule: true
    // },
    entry: {
        index: './source/index.ts',
    },
    resolve: {
        fullySpecified: true,
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        }), new ResolveTypescriptPlugin()]
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, './bundled'),
        filename: 'index.js',
        chunkFormat: 'module'
    }
}

问题是它不起作用，因为我有路径别名（@/xxx/yyy）：

assets by status 9.18 KiB [cached] 22 assets
./source/index.ts 433 bytes [built] [code generated]

ERROR in ./source/index.ts 1:0-363
Module not found: Error: Can't resolve '@/modules/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 2:0-34
Module not found: Error: Can't resolve '@/errors/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 3:0-33
Module not found: Error: Can't resolve '@/types/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 3 errors in 8500 ms

即使我使用的是TsconfigPathsPlugin ，它也不起作用，当我不使用 esmodules 时它运行良好。

项目的来源是这里 repo的分支module-alias

Answer 1

这似乎是 webpack 的问题，该问题已在最新版本 5.74.0 中解决（在此处查看更多详细信息https://github.com/webpack/webpack/issues/13252 ）。 要修复，请将 webpack 升级到最新版本 5.74.0 并将以下内容添加到 webpack 配置中

  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs']
    }
  },