Question

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

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

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

@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
                          }
                      }
                  })
              ]
          }
        : {}
};

请问有人可以帮忙吗？

Answer 1

我认为这里的问题与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）并将该对象绑定到依赖项？

Answer 2

毕竟，问题出在以下事实：存在重复的依赖关系，并且webpack为单个依赖关系创建了多个实例。

此问题已解决：

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

使用节点模块中的软件包时丢失范围

2 个答案: