我的一个依赖项有.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文件。