我有两个Typescript react模块:moduleAmoduleB
我试图通过使用Button.tsx导出moduleA中的Button.tsx并引用该组件来使用moduleB中的组件moduleA
这是我要执行的步骤:

  • moduleA中安装和配置webpack和ts-loader。
  • 使用moduleA的webpack创建构建。
  • moduleB中配置webpack和ts-loader。
  • 使用moduleAmoduleB中安装npm install ../moduleA

  • 然后,我使用以下命令从Button引用moduleB中的moduleA组件:
    import { Button } from "moduleA";
    
    我收到此错误:
    ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx
    ./src/Start.tsx
    [tsl] ERROR in C:\Users\VaibhavPC\Projects\moduleb\src\Start.tsx(2,24)
          TS2307: Cannot find module './moduleA'
    
    这是我的package.jsonmoduleA:
    {
      "name": "moduleA",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "start": "react-scripts start",
        "build": "rm ./lib/* && tsc",
        "magic": "webpack --config webpack.config.js",
        "prepublish": "npm run build",
        "test": "./test.sh"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@types/chai": "^3.4.35",
        "@types/enzyme": "^2.7.6",
        "@types/mocha": "^2.2.40",
        "@types/react": "^15.0.18",
        "@types/react-dom": "^0.14.23",
        "@types/sinon": "^1.16.36",
        "chai": "^3.5.0",
        "enzyme": "^2.8.0",
        "jsdom": "^9.12.0",
        "mocha": "^3.2.0",
        "react": "^15.4.2",
        "react-addons-test-utils": "^15.4.2",
        "react-dom": "^15.4.2",
        "sinon": "^2.1.0",
        "webpack-cli": "^2.1.4",
        "ts-loader": "^4.3.0",
        "webpack": "^4.10.1"
      },
      "files": [
        "lib",
        "LICENSE",
        "main.js"
      ],
      "types": "./lib/Button.d.ts",
      "dependencies": {
        "typescript": "^2.8.3"
      }
    }
    
    以及moduleB的package.json。
    {
      "name": "tmp",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "start": "react-scripts start",
        "build": "rm ./lib/* && tsc",
        "magic": "webpack --config webpack.config.js",
        "prepublish": "npm run build",
        "test": "./test.sh"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@types/chai": "^3.4.35",
        "@types/enzyme": "^2.7.6",
        "@types/mocha": "^2.2.40",
        "@types/react": "^15.0.18",
        "@types/react-dom": "^0.14.23",
        "@types/sinon": "^1.16.36",
        "chai": "^3.5.0",
        "enzyme": "^2.8.0",
        "jsdom": "^9.12.0",
        "mocha": "^3.2.0",
        "react": "^15.4.2",
        "react-addons-test-utils": "^15.4.2",
        "react-dom": "^15.4.2",
        "sinon": "^2.1.0",
        "webpack-cli": "^2.1.4",
        "ts-loader": "^4.3.0",
        "webpack": "^4.10.1",
        "babel-preset-react": "^6.16.0",
        "babel-preset-stage-3": "^6.17.0",
        "css-loader": "^0.27.3",
        "json-loader": "^0.5.4",
        "sass-loader": "^6.0.2",
        "style-loader": "^0.13.1",
        "url-loader": "^0.5.7",
        "extract-text-webpack-plugin": "^2.0.0-beta.4"
      },
      "files": [
        "lib",
        "LICENSE",
        "main.js"
      ],
      "types": "./lib/hello.d.ts",
      "dependencies": {
        "modulea": "file:../modulea",
        "react-scripts": "1.1.4",
        "typescript": "^2.8.3"
      }
    }
    
    tsconfig.json
    {
        "compilerOptions": {
            "outDir": "./dist",
            "target": "es5",
            "module": "commonjs",
            "noImplicitAny": true,
            "removeComments": true,
            "declaration": true,
            "sourceMap": true,
            "jsx": "react"
        },
        "include": [
            "./src/**/*.tsx",
            "./src/**/*.ts"
        ],
        "exclude": [
            "node_modules"
        ]
    }
    
    文件夹结构:
    ├── dist
    ├── node_modules
    ├── src
    ├── package.json
    ├── webpack.config.js
    ├── tsconfig.json
    
    还有其他方法吗?

    最佳答案

    这是因为用作依赖项的程序包已损坏。
    moduleA在错误的位置寻找按钮。 package.jsonmain属性设置为"main.js"。使用该软件包时,它将尝试在根目录中找到main.js文件。但是根据您的文件夹结构,它不存在。

    作为验证步骤,请转到moduleBnode_modules文件夹并打开moduleA,文件夹内是否有main.js

    它不应该存在,因为tsconfigoutDir设置为"./dist"。解决方案是将moduleAmain更改为"./dist/main.js"

    关于reactjs - 无法解析Typescript模块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50617626/

    10-09 21:15