在 React.JS 中创建 NPM 包

在本文中，我将引导您完成为 React.js 应用程序创建和发布 npm 包的过程。

首先，运行以下命令：

npx create-react-library react-loader

这将生成一个基本的 React.js 应用程序/包。运行命令后，您将看到如下项目结构：

在 src 文件夹中，您将找到一个index.js 文件。

您可以直接在index.js文件中创建库组件，也可以在src文件夹中创建一个新的组件文件并从index.js文件中导出它，如下所示：

如果您的组件使用 CSS，请务必将其导入到您的组件文件中。

接下来，如果您的项目中有 dist 文件夹，请将其删除。要测试您的组件是否正常运行，请导航到 example/src 文件夹。

在 App.js 文件中，导入您的组件，如下所示。这与您将此库作为 npm 包包含在其他项目中的方法相同。

要运行应用程序，请执行以下命令：

cd react-loader && npm start
cd react-loader/example && npm start

测试您的库后，就可以发布它了。

如果您已经为项目设置了存储库，只需推送最终更改即可。否则，创建一个新的存储库并推送您的更改。

您还需要在项目的根目录创建一个 .npmignore 文件，其功能类似于 NPM 的 .gitignore 文件。它会阻止某些文件和文件夹（如 node_modules、.git、.gitignore 等）发布到 NPM 注册表。

推送更改后，运行命令 npm login。系统会提示您在浏览器中打开 NPM，您可以在其中登录您的帐户或注册（如果您没有帐户）。然后，执行 npmpublish，这会将您的 dist 文件夹发布到 NPM，并使用 package.json 文件中指定的版本。

软件包发布后，您可以在 NPM 网站上查看它，方法是搜索您的软件包名称或访问您的个人资料，其中将列出您的所有软件包。

关注更多你可以在这里找到我

以上是在 React.JS 中创建 NPM 包的详细内容。更多信息请关注PHP中文网其他相关文章！