首页 > web前端 > js教程 > 正文

在 React.JS 中创建 NPM 包

DDD
发布: 2024-11-21 00:58:10
原创
859 人浏览过

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

首先,运行以下命令:

npx create-react-library react-loader
登录后复制

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

Create NPM package In React.JS

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

Create NPM package In React.JS

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

Create NPM package In React.JS

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

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

Create NPM package In React.JS

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

要运行应用程序,请执行以下命令:

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

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

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

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

Create NPM package In React.JS

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

Create NPM package In React.JS

Create NPM package In React.JS

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

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

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

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板