Question

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

ProjectTemplate
游戏

这是两个非常简单的项目，因为我正在使用Typescript和Webpack迈出第一步。

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

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

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

在我的游戏中（位于此路径：“ C：\ personale \ Typescript \ Game”），项目中只有一个项目Index.ts：

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

这是我的Game项目的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>

问题是，当我尝试在Game项目上运行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和打字稿分开工作，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'

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

1 个答案: