Question

我正在构建一个小的组件库，并将其发布到npm。这些是反应成分。文件结构如下：

? my-library
 ┣ ?src
 ┃ ┣ ?Component1.js
 ┃ ┣ ?Component1.js
 ┃ ┣ ?Component1.js
 ┃ ┣ ?Plugin1.js
 ┃ ┣ ?Plugin2.js
 ┃ ┣ ?index.js
 ┣ ?.babelrc
 ┣ ?package.json

我有一个脚本，可将jsx转换为es5，以便将组件用作node_module

"transpile": "./node_modules/.bin/babel src --out-dir build",

因此，您可以想象编译后的项目结构看起来是一样的，除了使用build文件夹而不是src文件夹。（我在src文件中列出了.npmignore文件夹。）

我的package.json列出了"main": "build/index.js"。

index.js文件只是导入所有组件并将它们导出以方便使用：

// index.js
import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';
import Plugin1 from './Plugin1';
import Plugin2 from './Plugin2';

export { Component1, Component2, Component3, Plugin1, Plugin2 };

Plugin1和Plugin2给我带来了一个问题，因为它们各自导入自己的依赖项，我希望将它们作为包的 peerDependencies 。我只希望用户必须安装Plugin1的对等依赖项（如果它们使用使用 Plugin1）。但是，通过将所有内容导入index.js并从那里全部导出，我遇到了问题。如果有人进行import { Component1 } from 'my-library'，则错误提示'Cannot find peer-dependency-of-plugin1'。通过将它们全部导入到index.js中，我用Plugin1和Plugin2的导入污染了程序包的全局空间。

我对此的解决方案将是简单地不包括我的Plugin1中的Plugin2和index.js，并要求用户直接从软件包中导入这些文件，例如：

import Plugin1 from 'my-library/Plugin1'

这不起作用，因为各个组件位于 build 文件夹中。这意味着我需要这样做：

import Plugin1 from 'my-library/build/Plugin1'

这行得通，但我觉得它很丑。我希望用户能够直接引用'my-library/Plugin1'。是否可以将babel或我的package.json配置为使用build文件夹作为根文件夹，并且任何/都将与此相对？我不想将所有转译的文件都放在我的根文件夹中，因为我觉得这是一个不好的组织。请让我知道这是否可行，什么是最佳做法，或者我的问题不清楚。感谢您的阅读。

构建一个npm软件包库，用户可以在其中从子文件夹导入组件

0 个答案: