我创建了一个React组件库，它作为一个微前端服务运行。我能够使用这些技术构建并运行它：

• React
• typescript
• 样式化组件
• 故事书
• 汇总

我还可以将组件库作为包发布到GitHub/npm，并将库导入到我也在本地运行的next.js应用程序中。
如何创建一个从next.js应用程序到在我的机器上本地运行的react组件库的符号链接？
现在，流程是在storybook中测试和开发组件，然后我必须将库发布到GitHub，然后我必须将本地包更新到GitHub中的新版本以查看这些新更改。
我希望能够在next.js应用程序中运行react组件库，这样我就可以在应用程序中构建和测试我的组件，并知道一切都按预期工作。
React组件库Rollup配置：

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 postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    external: ["react-dom", "styled-components"],
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss()
    ],
    globals: { "styled-components": "styled" },
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
  {
    input: "src/themes/index.ts",
    output: [{ file: "dist/themes/index.js", format: "cjs" }],
    plugins: [commonjs(), resolve(), typescript({ tsconfig: "./tsconfig.json" })]
  }
];

React组件库package.json

{
  "name": "xxxxx",
  "version": "0.2.11",
  "description": "React Component Library",
  "scripts": {
    "rollup": "rollup -c",
    "test": "jest",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "chromatic": "npx chromatic --project-token=xxxxx",
    "clean": "rm -rf node_modules && rm -rf package-lock.json && npm i",
    "generate": "node ./src/util/create-component"
  },
  "keywords": [],
  "author": {
    "name": "xxxxx"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.5",
    "@rollup/plugin-commonjs": "^25.0.1",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-terser": "^0.4.3",
    "@rollup/plugin-typescript": "^11.1.1",
    "@storybook/addon-essentials": "^7.0.21",
    "@storybook/addon-interactions": "^7.0.21",
    "@storybook/addon-links": "^7.0.21",
    "@storybook/addon-styling": "^1.3.0",
    "@storybook/blocks": "^7.0.21",
    "@storybook/react": "^7.0.21",
    "@storybook/react-webpack5": "^7.0.21",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.2",
    "@types/react": "^18.2.12",
    "@types/styled-components": "^5.1.26",
    "babel-jest": "^29.5.0",
    "babel-plugin-styled-components": "^2.1.3",
    "chromatic": "^6.19.8",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^3.25.1",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "storybook": "^7.0.21",
    "styled-components": "^6.0.0-rc.3",
    "tslib": "^2.5.3",
    "typescript": "^5.1.3"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^6.0.0-rc.3"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index.d.ts",
  "publishConfig": {
    "registry": "xxxxx"
  },
  "readme": "ERROR: No README data found!",
  "_id": "xxxxx@0.0.3"
}

Next.js应用程序下一个配置：

const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };

    config.resolve.alias = {
      ...config.resolve.alias,
      "styled-components": path.resolve("./node_modules/styled-components"),
      "react-dom": path.resolve("./node_modules/react-dom"),
      "react": path.resolve("./node_modules/react")
    };

    return config;
  },
  reactStrictMode: true,
  swcMinify: true,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

我尝试过的事情：
npm link
在组件库中运行npm link
在我的next.js应用程序中，我运行npm link <package-name> which successfully updates the package. But when I go to run my next.js application using npm run dev我没有得到任何错误，但我没有看到任何我在本地对组件库所做的更新。 我必须更新next.config.js以包含样式化组件、react-dom和react包的解析器，以便使其运行npm install我已经在next.js应用程序中运行了npm install --no-save <path/to/package-name>`来创建一个符号链接，它也是成功的。
同样的问题，当我进入我的next.js应用程序时，我没有得到任何错误，但我没有看到我的组件库的更新，而我在本地运行故事书时可以看到。
同样重要的是要注意，在我的组件库中，我对react、react-dom和styled-components使用了peerDependencies。
我希望宿主应用程序已经安装了这些包，以便运行组件库。
我不确定这是否会引起任何问题。
还有，有没有什么方法可以看到物理上的符号链接设置？
每当我运行上面的这些命令时，没有错误或任何东西，但在终端中没有任何重要的东西表明实际上有一个链接覆盖了包。
因为在我看来，它仍然使用GitHub上最新版本的安装包，而不是使用本地符号链接来进行本地更改。