将InversifyJS集成到创建-React中

Question

我正在做一个项目，在这个项目中，用巴比伦制作的WebGL游戏被嵌入到一个CRA中。

由于我们非常重视软件体系结构，所以我们希望用WebGL作为我们的DI容器来构建InversifyJS部件。

然而，InversifyJS通过使用类型记录解码器来工作。但目前CRA不支持这些标准。

我看过一些关于如何使它发挥作用的指南，但它们都过时了，对我来说也不起作用。

如果有人能给我指明正确的方向我会很高兴的。

我使用的CRA版本为5.0.0

Answer 1

好吧，在搜索了很多小时之后，我自己找到了答案。

通过使用customize-cra和react-app-rewired，必须用以下内容覆盖webpack配置：

​

// This file is used together with react-scripts-rewire to overwrite the webpack config of your CRA App to add capability for
// Typescript Decorators

const { override, addBabelPlugin } = require("customize-cra");
const babelTsTransformPlugin = require("babel-plugin-transform-typescript-metadata");

module.exports = override(addBabelPlugin(babelTsTransformPlugin));

​

然后，对tsconfig进行修改以允许TS Decorator：

​

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"]

​

之后，在引导项目时，必须通过导入reflect-metadata模块来安装和加载它。