将 React 组件作为 Node 模块导出到 NPM
介绍
如果你一直在为项目开发 React 中的可重用组件，那么一种有效的开发方法是将它们作为node 包发布到 npm 。这有两点好处：首先，你可以在未来的项目中将它们用作依赖项，而无需手动复制代码。其次，你可以让其他开源开发人员查看该包，提出建议，删除错误，并为你进一步开发。
在本指南中，您将学习如何使用 Create-React-App 创建一个简单的 React 组件并将其作为节点模块导出到 npm。
设置
让我们在 React 中构建一个简单的水平规则组件。为了简洁起见，它将是一个简单的 React 组件，用于渲染hr标签。但是，您可以用它做更多的事情，例如添加props，让开发人员在使用和样式方面具有更多的可定制性。
使用 Create-React-App 创建一个空的 React 项目。
npx create-react-app react-hr-component
安装 Babel 来转换 ES6 JavaScript。
npm install --save-dev @babel/cli @babel/preset-react
接下来，在根目录中创建一个名为component的文件夹。您的自定义组件位于此文件夹中。这很重要，因为在某个时候您会列出组件的路径。
创建组件
在组件文件夹中，创建一个名为HR.js 的文件，其中包含组件的代码。在其中渲染一个简单的hr标签。
import React from 'react';
export const HR=()=><hr/>
您可以直接将样式作为内联 JSX 样式添加到其中，也可以使用单独的文件使用类来设置 JSX 元素的样式。如果您使用后一种方法来设置组件的样式，请确保正确导入它。您还可以将宽度、高度、颜色、重量等属性传递给此组件，并相应地设置hr标签的样式。
对 package.json 进行配置更改
您的组件已准备就绪，可以发布到 npm 上。下一步是对package.json文件进行一些配置更改，以便将此组件导出为 npm 上的节点模块。在scripts下的package.json文件中，添加以下行：
"publish:npm": "rm -rf dist && mkdir dist && babel src/component -d dist --copy-files"
上面这行代码允许你使用 Babel 编译 JavaScript。创建一个名为dist的目录，然后使用单个命令将编译后的 JavaScript 复制到此文件中。
您需要做的下一个更改是将private设置为false，以允许任何人将您的组件用作普通依赖项或节点模块。此外，在 Babel 的 presets 配置中添加 Babel preset-react，以便为您的组件添加 React 特定支持，例如对 JSX 的支持。
{
"name": "react-hr-component",
"version": "0.1.0",
"private": false,
"babel": {
"presets": [
"@babel/preset-react"
]
}
...
}
package.json文件中显示的名称是 npm 上出现的组件的实际名称。您可以在此处查看整个package.json文件：
{
"name": "react-hr-component",
"version": "0.1.0",
"private": false,
"babel": {
"presets": [
"@babel/preset-react"
]
},
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"publish:npm": "rm -rf dist && mkdir dist && babel src/component -d dist --copy-files"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.11.5",
"@babel/preset-react": "^7.10.4"
}
}
如果有任何差异，请使用本示例中使用的 React 的确切版本。
将组件发布到 npm
只需几个命令即可将 React 组件发布到 npm。首先，确保您在npmjs上有一个帐户。
在终端内运行：
npm login
命令行将提示您输入 npm 凭据。成功登录后，运行以下命令：
npm run publish:npm
上面这行代码是你创建的脚本的别名，用于使用 Babel 转译 ES6 代码并为你的组件创建构建。最后，运行以下命令：
npm publish
您已成功将 React 组件作为节点模块导出到 npm！
您可以像使用 npm 上任何其他 React 组件一样使用它。
结论
将 React 组件发布到 npm 可让您更快地进行开发，还可帮助其他开发人员将您的组件用作项目中的节点模块。在 npm 上发布组件后，您还应提供其安装和使用的文档以及 GitHub 存储库。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~