typescript - Webpack 尝试将 .ts 文件解析为 .js，即使 .ts 在 resolve.extensions 列表中排在第一位

Question

我的一个依赖项有 .ts 文件和 .js 文件并排使用相同的名称，除了扩展名。 Webpack 正在获取 .ts 文件的解析器错误，并且错误总是在引入特定于 typescript 的构造的地方，所以我假设它是发出错误的 javascript 解析器。运行 npx tsc 将使所有内容都能正常编译，所以我知道源代码都是有效的。

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'output management'
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    node: {
        fs: 'empty'
    }
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "es6",
    "allowJs": false,
    "sourceMap": true,
    "outDir": "./dist/",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

package.json:

{
  "name": "kalaio",
  "version": "1.0.0",
  "description": "Kalaio Web App",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "author": "MrZoraman",
  "license": "Zlib",
  "dependencies": {
    "imgui-js": "git+https://github.com/MrZoraman/imgui-js.git"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "three": "^0.104.0",
    "ts-loader": "^6.0.0",
    "typescript": "^3.4.5",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

索引.ts:

import './main.ts';

main.ts:

import { WebGLRenderer } from 'three/src/Three';

import * as ImGui from "imgui-js";
// import * as ImGui_Impl from 'imgui-js/example/imgui_impl';

import { bar } from './foo';

main().catch(err => console.log(err));

async function main() : Promise<void> {
    bar();

    await ImGui.default();
    var renderer = new WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //   ImGui_Impl.Init(renderer.domElement);
}

foo.ts:

export function bar() {
    console.log("Test!");
}

这是我的错误信息:

ERROR in ./node_modules/imgui-js/imconfig.ts 42:40
Module parse failed: Unexpected token (42:40)
You may need an appropriate loader to handle this file type.
| //---- Pack colors to BGRA8 instead of RGBA8 (if you needed to convert from one to another anyway)
| //#define IMGUI_USE_BGRA_PACKED_COLOR
> export const IMGUI_USE_BGRA_PACKED_COLOR: boolean = false;
| 
| //---- Implement STB libraries in a namespace to avoid linkage conflicts (defaults to global namespace)
@ ./node_modules/imgui-js/imgui.js 146:0-37 889:32-66 891:32-66
@ ./src/main.ts
@ ./src/index.ts

42:40 处的标记是冒号。

我已经尝试了 ts-loader 和 awesome-typescript-loader 但它们都给出了相同的错误。

如果我删除

resolve: {
    extensions: ['.tsx', '.ts', '.js']
},

从 webpack.config.js 导入模块并编译成功。但是，import { bar } from './foo'; 停止工作。错误:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './foo' in 'C:\Users\Hiiro\Development\KalaioThree\src'
@ ./src/main.ts 12:0-28 16:8-11
@ ./src/index.ts

因此，一个“有效”的解决方案是将我所有的源代码都放在 main.ts 中。但这绝对不是一个理想的解决方案。我希望能够使用 typescript 模块并导入我自己的 typescript 文件。

Answer 1

原来是因为我排除了/node_modules/文件夹:

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }
    ]
}

删除该行允许 webpack 为我提供更好的错误输出并引导我解决问题。

为了完整性和人们从谷歌找到这个问题，我的解决方案最终是将它添加到我的 webpack.config.js 中:

resolve: {
    extensions: ['.js', '.tsx', '.ts']
},

将 .js 条目作为第一个条目很重要，因为它可以防止 ts-loader 尝试解析模块中的 .ts 文件，这通常是不推荐的。