Question

我已经创建了一个UI JS库，package.json很好，我将其与webpack捆绑在一起，并且在npm中很好用（很好地存放在node_modules/library目录中）

但是，我想通过配置文件来配置一些东西。假设我的图书馆有一个Box React组件（它使用背景色渲染100x100正方形）：

// Box.js
export default function(props) {
   return <div style={{
       backgroundColor: props.color,
       width: "100px",
       height: "100px"
   }}>
       {props.children}
   </div>;
}

我想提供一种添加配置文件的可能性，以便背景颜色默认为用户选择的颜色。

因此，我的图书馆用户在其项目的根目录中创建了一个配置文件（我们将其称为library.config.js），该文件的内容如下：

// library.config.js
const BoxBackgroundColor = 'green';
export { BoxBackgroundColor }

如果此文件存在，则lib知道这一点，并且用户可以像这样简单地使用Box：

<Box />

和color道具将变为绿色。

如何实现这样的目标？

问题是当我捆绑库时，我不知道library.config.js文件是否存在。该信息可供用户项目中我的图书馆的用户使用。看来我想解析我的库中的所有import和require语句，除了library.config.js 。 require这个异常应在用户的项目捆绑阶段（当library.config.js文件可用时）得到解决。

如何使用JS配置文件和Web目标创建npm库？

0 个答案: