带有 .js 扩展名的 Webpack/ts-loader 导入无法解析

Question

我的目录结构如下：

\n

projectRoot\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-server\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 pom.xml\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-ui\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 file.ts.  (imports ./file.js)\n

\n

我的问题是project-server使用转译的 js 文件，因此需要.js扩展名来解析文件。我正在使用 webpack-dev-server 进行开发和使用ts-loader，但收到以下错误：

\n

Module not found: Error: Can't resolve './file.js' in \n'/projectRoot/project-ui/src'\n

\n

以下是我的webpack.config.js：

\n

module.exports = {\n  entry: './project-ui/src/file1.ts',\n  mode: "development",\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: 'ts-loader',\n        exclude: /node_modules/\n      },\n      ... other rules\n    ]\n  },\n  resolve: {\n    extensions: ['.js', '.ts'],\n  }\n

\n

我的tsconfig.json配置特定于project-server需要 js 文件的位置。即\n"outDir": "../project-server/src/main/resources/static"

\n

所以我不确定如何配置 Webpack/ts-loader 来正确解析 import 语句。

\n

Answer 1

更新截至2022年10月20日

Webpack v5.74.0于 2022 年 7 月发布，它包含一个新resolve.extensionAlias选项，为该问题提供了解决方案。

例如：

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

回复截至2021年9月1日

我目前正在处理基本上相同的问题。恐怕我没有一个好的答案给你，尽管我发现 2017 年的一个讨论说 ts-loader 不支持这种行为：

https://github.com/microsoft/TypeScript/issues/16577#issuecomment-343649391

如果从那时起就添加了支持，我还无法找到任何详细信息。

webpack.config.js尽管在我的部分中设置了别名，但我已经取得了一些成功resolve.alias，因此 Webpack 将使用的某些文件的相对路径.js解析为.ts等效路径。例如：

alias: {
    './file-processing.js': './file-processing.ts',
},

但这是一个非常笨拙的解决方案，根本无法扩展。

Answer 2

ts-loader 本身不支持带有 .js 扩展名的导入，因此该项目https://github.com/softwareventures/resolve-typescript-plugin提供了完成此工作所需的额外步骤。