precedent 是一个 npm 包，它可以用于在前端项目中创建可重用的组件库。这个包让开发者可以创建一个带有 React 组件和样式的库，并发布到 npm，以供其他开发者使用。
安装并使用
在开始使用前，需要先安装 precedent 包。
npm install -g precedent
然后就可以在命令行中使用 precedent 命令了。接下来，我们将创建一个新的组件库。
创建组件库
在你的工作目录下执行以下命令：
precedent new my-library
执行后，将会在当前目录下创建一个名为 my-library 的文件夹。这个文件夹包含了一些默认的文件和配置，可以让你立即开始构建库。
创建组件
接下来，我们将创建一个简单的组件，并将其包含在我们的库中。在 my-library/src 文件夹内创建一个新的文件夹 components，并在其中添加一个名为 Button.js 的新文件。
import React from 'react';
import './Button.css';
export default function Button(props) {
return <button className="my-button">{props.children}</button>;
}这是一个非常简单的组件，它只是渲染一个按钮，和一个 CSS 文件中定义的样式。请确保还有一个 CSS 文件，名为 Button.css，并包含以下内容：
.my-button {
background-color: blue;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
}现在我们可以在我们的库中使用 Button 组件。我们需要将它导出，以便其他项目可以导入它。
export { default as Button } from './components/Button/Button';现在我们的库已经可以被其他项目引入并使用了。
发布组件库
如果你想将你的组件库发布到 npm，你需要首先注册一个 npm 账户，然后在命令行中执行以下命令：
npm login
接下来执行以下命令，将你的代码发布到 npm：
npm publish
你现在已经成功发布了你的组件库！
使用组件库
在你的项目的 package.json 文件中添加以下配置：
{
"dependencies": {
"my-library": "^1.0.0"
}
}执行 npm install，它将会自动安装 my-library 以供你在项目中使用。
现在，你可以在你的项目中导入 Button 组件：
-- -------------------- ---- -------
------ - ------ - ---- -------------
-------- ----- -
------ -
-----
------------- ------------
------
--
-恭喜你，你已经成功地创建了并发布了一个可重用的组件库，现在其他开发者可以使用它了！
结论
在此教程中，我们学习了如何使用 npm 包 precedent 创建并发布一个可重用的前端组件库。我们创建了一个简单的 Button 组件，然后在 npm 上发布了它，并展示了如何在项目中使用它。现在你可以将此应用于你的项目中，分享你的代码并让其他人使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7b81e8991b448d900e