Webpack - 未找到模块：错误：无法解析“PT”

Question

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

1. 项目模板
2. 游戏

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

在我的 ProjectTemplate（位于此路径：“C:\personale\Typescript\ProjectTemplate”）项目中，我有三个文件 .ts：

卷轴.ts

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

changeReelId(value:number){
    this.id=value;
}

}

Reels.ts

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);
    }
}

这是我的 ProjectTemplate 的 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. */
  }
}

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

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,
        })
    ]
}

在我的Game（位于这个路径：“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,
        })
    ]
}

这是我的游戏项目中的 index.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:\personale\Typescript\Game\src'
 @ ./src/index.js 3:11-24

我认为我的 webpack.config 或 tsconfig 中缺少某些内容。

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

Answer 1

Webpack 和 typescript 分开工作，webpack 不知道 ts，而 ts 不知道 webpack。
所以在这种情况下，你告诉 ts 'PT' 是什么（通过路径），但你没有为 webpack 这样做。
请将这些行添加到根级别的 webpack 配置中

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

另外，你不是直接导出 Reel 类，所以在导入时你应该使用

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