javascript - 如何在create-react-app中导入自制模块？

Question

我在 ReactJS 应用程序中使用 create-react-app 和 TypeScript，并且我想导入我在另一个项目中创建的 TypeScript/JavaScript 模块。

该模块由文件 mymodule.js 组成，其中代码大致如下:

var mymodule;
(function (mymodule) {
    var MyClass = /** @class */ (function () {
        function MyClass() {
        }
        MyClass.myMethod = function () {
            // code
        };
        return MyClass;
    }());
    mymodule.MyClass = MyClass;
})(mymodule || (mymodule = {}));

然后是类型定义文件mymodule.d.ts，如下所示:

declare module mymodule {
    class MyClass {
        private static myMethod;
    }
}

在我的 create-react-app 项目中，我将这两个文件放在文件夹 /src/vendor 中，我想像这样使用该模块:

import { MyClass } from '../vendor/mymodule';

...

但是，Visual Studio Code(即 TypeScript 编译器)说

File '.../vendor/mymodule.d.ts' is not a module. ts(2306)

当我运行项目时，模块中的变量(例如类MyClass)是未定义。

这可能是错误的原因:该库是使用 module: "AMD" 生成的，但 create-react-app 似乎强制执行 module :“esnext”。

编辑:这是 create-react-app 项目的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "src"
  ]
}

Answer 1

由于您没有导出模块，因此无法导入该文件。为了使模块加载工作，您应该在 myModule 类文件的底部有一个导出。

export {
  mymodule
}