为使用主机依赖项for组件库

Question

I将Axios放在

devDependencies

中，以开除axios，然后将Axios放在
1. peerDependencies

   中。

   在

   rollup.config.ts
   ，我将Axios放入“外部”道具中，因此不会使用我的代码来构建。
Export默认[ {

2. input: "src/index.ts",
   output: [
     {
       file: packageJson.main,
       format: "cjs",
       sourcemap: true,
     },
     {
       file: packageJson.module,
       format: "esm",
       sourcemap: true,
     },
   ],
   plugins: [
     resolve(),
     commonjs(),
     typescript({ tsconfig: "./tsconfig.json" }),
     json(),
   ],
   external: ['react-dom', 'axios', 'react-redux', 'react', '@reduxjs/toolkit', 'react-audio-player']

   }， {

   input: "dist/esm/index.d.ts",
   output: [{ file: "dist/index.d.ts", format: "esm" }],
   plugins: [dts()]

   }，
   ];

   然后从我的组件库中i npm连接的反应和轴：

3. NPM链接../path-to-host/node_modules/reeact
   NPM链接../path-to-host/node_modules/axios

到我的组件库根，我创建了一个与

npm link

从我的主机项目我回想起Sym链接

npm link <libray-name>
在我的主机项目中，我对我的组件库未捕获的Axios（拦截器和标头）进行了一些设置，该组件库发送了“ RAW”请求。这使我徘徊，组件库仍在使用自己的Axios，而不是主机项目中的Axios。
5. 我如何强制我的组件库消耗主机项目的相同依赖关系？ update

，有时候它的工作原理开始正常，有时是不正确的：我对Axios并做出反应，但链接不会始终如一地影响项目，而是在眨眼上起作用。

我不认为这是实现您所追求的正确方法，但是过去我的粗暴调查给了我最好的结果。 我理解的问题

首先尝试在检查根节点模块文件夹之前，首先尝试从本地node_module文件夹解析。 ，例如，使用此目录结构：

    Host Project Root
    |- src
    |- node_modules
    |  |- react
    |  |- component-library
    |  |  |- node_modules
    |  |  |  |- react

Answer 1

component-library

这与从主机项目

react

的任何导入tos tos to to to：./node_modules/component-library/node_modules/react

为什么这是一个问题？

对于导入的软件包（

react

）和主机代码（

./src

）。

对此进行反应意味着，主机代码（

./node_modules/react

）和导入软件包（

react

）诸如上下文之类的事物将无法看到彼此的数据在生成的捆绑包中彼此连接。
任何解决方案？

component-library

？

well如果您的目标是在主机代码（

.src

）和导入的软件包（

./src

）上进行手表（出于并发的开发目的），那么

component-library

最有可能会为导入软件包的节点模块磨损（

npm dedupe

 ）并导致其构建失败，这远非理想。

一个解决方案（一种）：使其能够在主机代码（

./src

）和导入的软件包（

component-library

）上同时运行手表，并且不会引起不需要的重复程序包的问题在由此产生的捆绑包中，可以使用有限制的别名。 webpack示例：

npm dedupevitejs示例：

component-library 我没有直接通过ViteJS直接使用汇总，该vitejs提供了预配置的汇总。我认为Vitejs只是使用

./src

，它应该能够从上面的vitejs示例中获取相同的值。 limitations

主机代码（

component-library

）和导入的软件包（

const fs = require('fs-extra');

const config = {
    /* Other webpack config  */
    resolve: {
        alias: {
        }
    }
}

// load in package.json
let packageJson = fs.readFileSync('./package.json');
let package = JSON.parse(packageJson);

// loop through all dependencies in package.json and add aliases
// The aliases added below will ensure that all imports for a given package will
// resolve to "./node_modules/package" instead of the possible 
// "./node_modules/component-library/node_modules/package"
if (package?.dependencies) {
    Object.keys(package.dependencies).forEach(key => {
        config.resolve.alias[key] = path.resolve(`./node_modules/${key}`);
    })
}

// This is the same as the snippet but for devDependencies
// This should not be needed (which is why it is commented out)
// devDependencies are intended to not make it into the resulting bundle
// and should therefore not cause any issues.
// It can be uncommented if you want a scorched earth approach.
/*
 * if (package?.devDependencies) {
 *     Object.keys(package.devDependencies).forEach(key => {
 *         config.resolve.alias[key] = path.resolve(`./node_modules/${key}`);
 *     })
 * }
 */

）共享的所有依赖项必须在“主机项目”中的

const fs = require('fs-extra');
const path = require('path');

// helper to resolve path names.
function pathResolve(dir) {
  return path.resolve(__dirname, '.', dir)
}

// load in package.json
let packageJson = fs.readFileSync('./package.json');
let package = JSON.parse(packageJson);

// array to hold aliases to be added to vite config.
const resolveNodeModules: any[] = []

// loop through all dependencies in package.json and add aliases
// The aliases added below will ensure that all imports for a given package will
// resolve to "./node_modules/package" instead of the possible 
// "./node_modules/component-library/node_modules/package"
if (packageJson?.dependencies) {
    Object.keys(packageJson.dependencies).forEach(key => {
        resolveNodeModules.push({
            find: key,
            replacement: pathResolve('node_modules') + '/' + key
        });
    })
}

// This is the same as the snippet but for devDependencies
// This should not be needed (which is why it is commented out)
// devDependencies are intended to not make it into the resulting bundle
// and should therefore not cause any issues.
// It can be uncommented if you want a scorched earth approach.
/* if (packageJson?.devDependencies) {
 *     Object.keys(packageJson.devDependencies).forEach(key => {
 *         resolveNodeModules.push({
 *             find: key,
 *             replacement: pathResolve('node_modules') + '/' + key
 *         });
 *     })
 * }
 */

const config = {
    resolve: {
        alias: [
            ...resolveNodeModules
            /* Other aliases here if required i.e. { find: /@\//, replacement: pathResolve('src') + '/' }
        ]
    }
}

部分中。这包括依赖关系的软件包。

所有依赖项必须对解决强制解析的版本感到满意，即，如果两个软件包使用

@rollup/plugin-alias

，但是一个需要

resolveNodeModules

，而另一个则需要

./src

通常不通过别名强制分辨率，则将捆绑在一起。作为包装的两个独立版本，但是使用别名，它将被捆绑为一个单个版本，由于版本之间破坏了更改，因此可能对两个导入软件包无效。

结论

这是解决您的问题的适当解决方案吗？

no

做这项工作？

YES/有时 - 成功率适用于具有与彼此相同时间段创建的依赖性的项目。这通常意味着限制的可能性较小。 希望其他人会出现，并拥有更容易的解决方案，我们俩都会学到一些东西，但是现在我希望这至少有助于理解问题。