Question

我的一个依赖项具有.ts文件和.js文件，它们具有相同的名称，但扩展名不同。 Webpack正在获取.ts文件的解析器错误，并且错误总是在引入特定于打字稿的构造的地方出现，因此我认为是由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中。但是，这绝对不是理想的解决方案。我希望能够使用打字稿模块并导入自己的打字稿文件。

Answer 1

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

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

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

为了完整起见，人们从Google找到了这个问题，我的解决方案最终是将其添加到我的webpack.config.js中：

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

将.js条目作为第一个条目很重要，因为它阻止ts-loader尝试解析模块中的.ts文件，通常不建议这样做。

Webpack尝试将.ts文件解析为.js，即使.ts是resolve.extensions列表中的第一个

1 个答案: