0

我正在尝试使用 pixi.js 创建一个游戏模板，使用robotlegsjs 框架和打字稿来包括依赖注入和视图管理。

如果我在单个存储库中工作，一切都会很好，但是我将我已经在单独的节点模块中编写的大部分通用代码移动到用作“核心”。这就是一切都破裂的地方。

我将所有游戏移到了一个单独的节点模块中，并且只复制了一个文件来检查它是否可以在顶层运行。如果下面代码中的所有内容与其他文件位于同一目录中，则它可以正常工作，但是从节点模块中获取它会崩溃并出现代码下方的错误：

@injectable()
export class PresentationConfig implements IConfig {
    @inject(IInjector)
    private injector: IInjector;

    public configure(): void {
        this.mapActions();
    }

    private mapActions(): void {
        this.injector.bind(UpdateModelsCommand).toSelf();
    }
}

Uncaught Error: No matching bindings found for serviceIdentifier: Symbol(IInjector)
    at _validateActiveBindingCount (planner.js:62)
    at _getActiveBindings (planner.js:48)
    at _createSubRequests (planner.js:91)
    at planner.js:115
    at Array.forEach (<anonymous>)
    at planner.js:114
    at Array.forEach (<anonymous>)
    at _createSubRequests (planner.js:94)
    at Object.plan (planner.js:136)
    at container.js:317

我相信我的问题来自我的 webpack 配置，从外部目录获取包时可能会丢失范围。这是我的配置：

const path = require("path");
const outDir = path.resolve(__dirname, "dist");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
let env = process.env.NODE_ENV || "development";
const isProduction = env === "production";
let plugins = [new webpack.DefinePlugin({ isProduction: isProduction })];

if (!isProduction) {
    plugins.push(new webpack.SourceMapDevToolPlugin({ test: /\.ts$/i }));
    plugins.push(new webpack.optimize.ModuleConcatenationPlugin());
}

module.exports = {
    mode: env,
    entry: "./src/index.ts",
    devtool: isProduction ? undefined : "inline-source-map",
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: {
                    loader: 'awesome-typescript-loader',
                }
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    output: {
        filename: "bundle.js",
        path: outDir
    },

    plugins: plugins,
    optimization: isProduction
        ? {
              concatenateModules: true,
              minimize: true,
              minimizer: [
                  new UglifyJsPlugin({
                      cache: true,
                      parallel: 4,
                      uglifyOptions: {
                          output: {
                              comments: false
                          }
                      }
                  })
              ]
          }
        : {}
};

有人可以帮忙吗？

4

2 回答 2

0

我认为这里的问题与 webpack 无关，而是您如何绑定对象。Inversify 期望将对象绑定到构造函数中的变量，因此正确的流程应该是：

@injectable()
export class PresentationConfig implements IConfig {
    private injector: IInjector;

    constructor(@inject(IInjector)
                newInjector: IInjector){
          this.injector = newInjector
    }


    public configure(): void {
        this.mapActions();
    }

    private mapActions(): void {
        this.injector.bind(UpdateModelsCommand).toSelf();
    }
}

您是否创建了一个 container.ts 文件，在其中创建了一个类型的对象Container（来自 inversify）并将该对象绑定到您的依赖项？

于 2019-08-29T07:41:24.970 回答
0

毕竟，问题在于存在重复的依赖项，并且 webpack 正在为单个依赖项创建多个实例。

这解决了这个问题：

let DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); plugins.push(new DuplicatePackageCheckerPlugin());

于 2019-12-16T14:28:44.797 回答