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"
  }
}

index.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文件。

- MrZoraman

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文件，这通常是不建议的。

- MrZoraman