Webpack - 找不到模块：错误：无法解析"PT"

Question

我希望有人能帮助我理解这个错误。 我有两个打字稿项目：

1. 项目模板
2. 游戏

它们是两个非常简单的项目，因为我正在迈出打字稿和 webpack 的第一步。

在我的项目模板(位于此路径中："C：\personale\Typescript\ProjectTemplate"(项目中，我有三个文件.ts：

卷轴

export class Reel {
public id:number;
constructor(idReel:number){
this.id=idReel;
}
changeReelId(value:number){
this.id=value;
}

}

卷轴

import { Reel } from "./Reel";
export class Reels {
private reels:Array<Reel>=new Array();
constructor(numberReels:number){
if(numberReels>0){
for(let i:number=0;1<numberReels; i++){
let reel=new Reel(i);
this.reels.push(reel);
}
}
}
printReel(){
if(this.reels.length>0){
this.reels.forEach(function (reel:Reel) {
reel.changeReelId(1);
console.log(reel.id);
});
}
}
}

索引.ts

import { Reels } from './Reels';
export class Index {
constructor(){
const reels:Reels= new Reels(6);
reels.printReel();
}
callMirco(){
console.log(this);
}
}

这是我的项目模板的tsconfig.json

{
"compilerOptions": {
"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"declaration": true,                      /* Generates corresponding '.d.ts' file. */
"sourceMap": true,                        /* Generates corresponding '.map' file. */
"outDir": "dist/compiled/",                         /* Redirect output structure to the directory. */
"strict": true,                           /* Enable all strict type-checking options. */
"esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
}
}

这是我的webpack.config.js用于ProjectTemplate

。

const path = require('path');
const DtsBundleWebpack = require('dts-bundle-webpack')
module.exports = {
entry: "./src/index.ts",
output: {
filename: "ProjectTemplate.js",
path: path.resolve(__dirname, 'dist/build')
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"]
},
module: {
rules: [{ test: /.ts$/, loader: "ts-loader" }]
},
plugins: [
new DtsBundleWebpack({
name: 'ProjectTemplate',
main: 'dist/compiled/**/*.d.ts',
out: '../build/ProjectTemplate.d.ts',
outputAsModuleFolder: true,
})
]
}

在我的游戏中(位于此路径："C：\personale\Typescript\Game"(项目中只有一个项目 Index.ts：

import {Reel} from "PT";
const r = new Reel(9);
console.log(r);

这是我的游戏项目的tsconfig.json：

{
"compilerOptions": {
"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"declaration": true,                      /* Generates corresponding '.d.ts' file. */
"sourceMap": true,                        /* Generates corresponding '.map' file. */
"outDir": "build",                        /* Redirect output structure to the directory. */
"strict": true,                           /* Enable all strict type-checking options. */
"baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
"paths": {
"PT": ["../ProjectTemplate/dist/build/ProjectTemplate.d.ts"]
},                                       /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
}
}

这是我的webpack.config.js用于游戏项目

const path = require('path');
const DtsBundleWebpack = require('dts-bundle-webpack')
module.exports = {
entry: "./src/index.ts",
output: {
filename: "main.js",
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"],
},
module: {
rules: [{ test: /.ts$/, loader: "ts-loader" }]
},
plugins: [
new DtsBundleWebpack({
name: 'Game',
main: 'build/@types/**/*.d.ts',
outputAsModuleFolder: true,
})
]
}

这是我的索引.html在我的游戏项目中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game</title>
</head>
<body>
<h1> Test game </h1>
<script type="application/javascript" src="../ProjectTemplate/dist/ProjectTemplate.js"></script>
<script type="application/javascript" src="./build/index.js"></script>
</body>
</html>

问题是当我尝试在我的游戏项目上运行 webpack 构建时，出现此错误：

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'PT' in 'C:personaleTypescriptGamesrc'
@ ./src/index.js 3:11-24

我认为我的 webpack.config 或 tsconfig 中缺少一些东西。

在我的游戏项目中加载PT(项目模板(模块的方法是什么？

Answer 1

Webpack 和 Typescript 分开工作，webpack 不知道 ts，ts 不知道 webpack。
所以在这个缝合中，你告诉了ts什么是"PT"(通过路径(，但你没有为webpack这样做。
请将这些行添加到根级别的 webpack 配置中

resolve: {
alias: {
PT: path.resolve(__dirname, '../ProjectTemplate')
}
}

此外，您不会直接导出卷轴类，因此在导入时应使用

import {Reel} from 'PT/Reel'
import {Reels} from 'PT/Reels'
import {Index} from 'PT/Index'