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

4

我的目录结构如下:

projectRoot
├── project-server
│   ├── src
│   └── pom.xml
├── project-ui
│   ├── tsconfig.json
│   └── src
│       └── file.ts.  (imports ./file.js)

我的问题是,project-server 使用经过转译的 js 文件,因此需要使用 .js 扩展名解析这些文件。我正在使用 webpack-dev-server 进行开发,并使用 ts-loader,但是我收到以下错误信息:
Module not found: Error: Can't resolve './file.js' in 
'/projectRoot/project-ui/src'

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

我的tsconfig.json文件包含针对project-server需要JS文件的特定配置。具体地说,"outDir": "../project-server/src/main/resources/static"

因此,我不确定如何配置Webpack/ts-loader以正确解析导入语句。

2个回答

4

截至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.jsresolve.alias部分设置别名方面,我已经取得了一些成功,因此Webpack将使用.js解析到.ts等效文件的相对路径。例如:

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

但这是一个非常笨重的解决方案,根本不具备可扩展性。

1
不确定这对您是否有帮助,但在TypeStrong存储库中有关于允许导入具有.js扩展名的讨论 https://github.com/TypeStrong/ts-loader/issues/465#issuecomment-909445205,并且评论者表示,该项目https://github.com/softwareventures/resolve-typescript-plugin提供了额外的步骤以使其正常工作。 - amosq
谢谢@amosq,那个讨论正好是我遇到的问题,尽管我已经搜索了几天寻找解决方案,但我还没有找到它,这肯定很有用(看到我不是唯一遇到这个问题的人也有点安慰)。我看到你提到的建议只是在几天前出现的。我会试试resolve-typescript-plugin并在尝试后报告结果。 - Mark Hanna
再次感谢@amosq,我刚刚尝试了那个插件,它已经为我解决了这个问题。如果你愿意把它作为答案而不是评论添加,我很乐意将其标记为接受的答案。如果不是,明天我会自己添加答案以供其他遇到这个问题的人参考。 - Mark Hanna
抱歉,我在发表上一条评论时显然迷失了方向。我以为这个讨论是关于我的相关问题,而不是对这个问题的回应。糟糕! - Mark Hanna
我回到了之前遇到问题的项目上,并尝试使用插件,但是当我尝试启动webpack时,出现了段错误。你能否提供你的webpack配置和/或package.json的链接? - amosq
1
这是我的 GitHub 上的基础项目链接 @amosq: base-package - Mark Hanna

3

与扩展处理有些关联:https://dev59.com/WcPra4cB1Zd3GeqPs_Xv#71544906 及其相关链接。 - Harald

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接