找不到模块：错误：安装使用汇总构建的已发布反应组件库时无法解析

Question

我创建了一个名为“@b/b-core”的 React 组件库，并使用 Rollup 来构建并发布到存储库。我在react应用程序中安装了libary，当使用

Module not found: Error: Can't resolve '@b/b-core'

时，它显示

npm start

，但是使用import语句在vs code中的react应用程序组件的源代码中没有错误，看起来类型是正确的。

这里是

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import copy from 'rollup-plugin-copy';

const packageJson = require("./package.json");

export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                format: "cjs",
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: "esm",
                sourcemap: true,
            },
        ],
        plugins: [
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: "./tsconfig.json" }),
            copy({
                targets: [
                    { src: 'package.json', dest: 'dist' },
                ],
            }),
        ],
        external: ["react", "react-dom"],
    },
    {
        input: "src/index.ts",
        output: [{ file: "dist/index.d.ts", format: "es" }],
        plugins: [dts()],
    },
];

这是

packages.json

，我添加了main、module、types和peerDependency

{
  "name": "@b/b-core",
  "version": "0.1.6",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "dependencies": {
    "crypto-js": "^4.0.0",
    "esprima": "^4.0.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-scripts": "5.0.1",
    "rxjs": "^7.8.1",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "rollup -c",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@types/react": "^16.9.8",
    "@types/react-dom": "^16.9.19",
    "@rollup/plugin-commonjs": "^25.0.3",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-typescript": "^11.1.2",
    "@types/crypto-js": "^4.1.1",
    "@types/esprima": "^4.0.3",
    "rollup": "^2.79.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^5.3.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2"
  },
  "peerDependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  }
}

我是汇总和反应的新手，我做到了https://blog.logrocket.com/how-to-build-component-library-react-typescript/

Answer 1

已解决，因为发布在文件夹

dist

中，而

package.json

应该是

  "main": "cjs/index.js",
  "module": "esm/index.js",
  "types": "index.d.ts",

没有以

dist/***

开头，所以模块无法解析！