未解析带有.js扩展的加载器导入(/T)

Question

我的目录结构如下：

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来正确解析import语句。

Answer 1

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

Answer 2

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

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

如果从那以后添加了支持，我还没有找到它的任何细节。

不过，我在webpack.config.js的resolve.alias部分设置别名方面取得了一些成功，因此使用.js的某些文件的相对路径由Webpack解析为.ts等效项。例如：

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

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