如何从 React 组件创建 npm 库

2025-06-09

如何从 React 组件创建 npm 库

在本教程中，我将向您展示如何创建一个由 React 组件组成的 npm 库。如果您想在多个项目中复用代码，或者只是想创建自己的库，这绝对会对您有所帮助。

目录：

如果您准备好了，那我们就开始吧。

入门

首先，我们需要初始化一个 React 项目。打开终端，进入你想要创建项目的目录，然后使用create-react-appCLI 创建一个新的 React 应用。

npx create-react-app react-npm-library
## then enter the new directory
cd react-npm-library
## then start the dev server
yarn start
Enter fullscreen mode Exit fullscreen mode

我建议使用npx，因为它会安装最新版本，react-scripts并且不会全局安装任何东西。

然后进入src目录并创建一个新目录，您将在其中放置组件库

cd src
mkdir react-library ## you can name it  any name
Enter fullscreen mode Exit fullscreen mode

创建库

如果你已经完成了上述步骤，那么现在就可以创建你的库了。现在让我们创建一个可以创建优质按钮的简单库。

在目录中，react-library我们将为该组件创建一个文件。

touch button.jsx
touch index.css
Enter fullscreen mode Exit fullscreen mode

然后将此代码放入button.jsx

import React, {useState, useEffect} from 'react';
import './button.css'

const AwesomeButton = (props) => {
    const [color, setColor] = useState(null)
    useEffect(() => {
        if (props.variant) {
            if (props.variant === 'primary') {
                setColor('#0077ff')
            } else if (props.variant === 'secondary') {
                setColor('#ff0062')
            } else if (props.variant === 'success') {
                setColor('#0f8000')
            } else {
                setColor('#949393')
            }
        }
    })
    const {children} = props

    return (
        <button 
            className='buttonComponent'
            style={{
                backgroundColor: color
            }}
        >
            {children.toUpperCase()}
        </button>
    )
}

export default AwesomeButton;
Enter fullscreen mode Exit fullscreen mode

在 index.css 中

.buttonComponent {
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
cursor: pointer;
border: none;
    transition: all .3s ease-out;
    box-shadow: #272727b0 1px 1px 1px, #272727b0 -1px -1px 1px;
}
.buttonComponent:hover {
    box-shadow: #272727b0 1px 1px 3px, #272727b0 -1px -1px 3px;
}
.buttonComponent:active {
    opacity: .8;
}
Enter fullscreen mode Exit fullscreen mode

现在你可以导入App.js并测试了。如果运行正常，那就继续吧。

初始化库

现在如果它起作用那么您必须进入react-library目录并创建它以准备发布。

cd react-library
Enter fullscreen mode Exit fullscreen mode

然后初始化一个 npm 包

npm init -y
Enter fullscreen mode Exit fullscreen mode

这将在根目录中创建一个package.json文件。它应该如下所示

{
  "name": "react-library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

现在您可以继续下一部分了

捆绑库

现在让我们准备打包库。我们将分几步完成

重新排列包目录

现在让我们安排react-library目录以便于捆绑。

转到您的终端并在react-library目录中输入这些命令

mkdir src
move button.jsx src
move index.css src
cd src
torch index.js
Enter fullscreen mode Exit fullscreen mode

上述命令将button.jsx和index.css文件移动到新src目录，并创建一个名为“index.js
现在您的项目结构看起来像这样”的新文件。

|
 - src
   | - index.js
   | - index.css
   | - button.jsx
 - package.json
Enter fullscreen mode Exit fullscreen mode

在文件中index.js添加以下代码

import AwesomeButton from  './button.js'

const returnLibrary = () => {
    return {
        AwesomeButton: AwesomeButton
        // you can add here other components that you want to export
    }
}
export default returnLibrary()
Enter fullscreen mode Exit fullscreen mode

安装捆绑器

现在让我们安装打包工具。我推荐Rollup，因为我认为它在打包库方面比 Webpack 更容易使用。但如果你想使用其他打包工具，也可以使用它。
所以在根目录下react-library安装 Rollup。

注意：您必须devDependencies通过添加--save-dev标志来安装它们。这是因为它们仅在开发模式下使用，否则，如果您将它们添加到dependency列表中，这将导致您的用户必须安装它们。

npm install rollup --save-dev
Enter fullscreen mode Exit fullscreen mode

Rollup 将用于编译我们的代码。但由于我们肯定希望将其编译为 ES5 语法，因此必须安装Babel和一个与 Rollup 配合使用的插件。请注意，该jsx语法比较特殊，并且不是有效的 JavaScript，因此您还需要安装对它的支持。
因此，请在命令行中输入以下命令来安装所有必需的软件包。

npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel --save-dev
Enter fullscreen mode Exit fullscreen mode

由于我们也要捆绑 css，所以我们必须安装一个样式捆绑器，以便我们使用rollup-plugin-styles

npm install rollup-plugin-styles autoprefixer --save-dev
Enter fullscreen mode Exit fullscreen mode

选修的

我们还可以添加 Babel 运行时助手。如果你要用 Babel 打包库，这一点很重要。所以在命令行中输入：

npm install @babel/runtime
npm install @babel/plugin-transform-runtime --save-dev
Enter fullscreen mode Exit fullscreen mode

如果您想要源地图，那么请安装此插件。

npm install rollup-plugin-sourcemaps --save-dev
Enter fullscreen mode Exit fullscreen mode

配置

现在让我们配置 rullop 和 babel 来编译我们的代码。
在根目录中创建以下文件。

  • rollup.config.js
  • .babelrc

里面rollup.config.js添加如下代码。

import styles from "rollup-plugin-styles";
const autoprefixer = require('autoprefixer');
import { terser } from 'rollup-plugin-terser'
import babel from '@rollup/plugin-babel';

// the entry point for the library
const input = 'src/index.js'

// 
var MODE = [
  {
    fomart: 'cjs'
  },
  {
    fomart: 'esm'
  },
  {
    fomart: 'umd'
  }
]




var config = []


MODE.map((m) => {
    var conf = {
        input: input,
        output: {
            // then name of your package
            name: "react-awesome-buttons",
            file: `dist/index.${m.fomart}.js`,
            format: m.fomart,
            exports: "auto"
        },
        // this externelizes react to prevent rollup from compiling it
        external: ["react", /@babel\/runtime/],
        plugins: [
            // these are babel comfigurations
            babel({
                exclude: 'node_modules/**',
                plugins: ['@babel/transform-runtime'],
                babelHelpers: 'runtime'
            }),
            // this adds sourcemaps
            sourcemaps(),
            // this adds support for styles
            styles({
                postcss: {
                    plugins: [
                        autoprefixer()
                    ]
                }
            })
        ]
    }
    config.push(conf)
})

export default [
  ...config,
]
Enter fullscreen mode Exit fullscreen mode

还将此添加到.babelrc

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
    ]
}
Enter fullscreen mode Exit fullscreen mode

编辑package.json脚本

现在开始package.json编辑脚本部分并将其更改为如下内容。

// package.json
...
"scripts": {
    "build": "rollup -c"
}
...
Enter fullscreen mode Exit fullscreen mode

构建包

现在一切都已设置好运行

npm run build
Enter fullscreen mode Exit fullscreen mode

这会将您的包编译到dist目录中。

编辑package.json

现在我们的图书馆已经建成，让我们进行编辑package.json以使我们的图书馆准备好发布。

如果你从一开始就关注的话，我认为你packages.json看起来是这样的。

{
    "name": "react-library",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "directories": {
        "test": "test"
    },
    "scripts": {
        "build": "rollup -c"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@babel/runtime": "^7.12.5"
    },
    "devDependencies": {
        "@babel/cli": "^7.12.10",
        "@babel/core": "^7.12.10",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@babel/preset-react": "^7.12.10",
        "@rollup/plugin-babel": "^5.2.2",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-styles": "^3.12.2",
    }
}
Enter fullscreen mode Exit fullscreen mode

我将解释几个重要字段代表什么，您可以在npm 文档中找到更多信息。

字段

name和version

如果您计划发布您的软件包，那么 package.json 中最重要的部分是名称和版本字段，因为它们是必需的。名称和版本共同构成一个标识符，该标识符被认为是完全唯一的。软件包的变更应伴随版本的变更。如果您不打算发布您的软件包，则名称和版本字段是可选的。
名称可以选择性地以作用域作为前缀，例如 @myorg/mypackage。

描述

在其中添加描述。它是一个字符串。这有助于人们发现你的软件包，因为它在 npm search 中列出。

关键词

在其中输入关键字。它是一个字符串数组。这有助于人们在 npm 搜索中发现你的软件包。

主页

项目主页的 URL。

执照

您应该为您的软件包指定一个许可证，以便人们知道他们被允许如何使用它，以及您对它施加的任何限制。

如果您使用的是通用许可证（例如 BSD-2-Clause 或 MIT），请为您正在使用的许可证添加当前的 SPDX 许可证标识符，如下所示：

{"license":"BSD-3-Clause"}
Enter fullscreen mode Exit fullscreen mode

人员字段：作者、贡献者

“作者”指的是一个人。“贡献者”指的是一组人员。每个“人员”都是一个对象，其中包含一个“姓名”字段，以及可选的“网址”和“邮箱”，如下所示：

{
    "name":"Barney Rubble",
    "email":"b@rubble.com",
    "url":"http://barnyrubble.tumblr.com/"
}
Enter fullscreen mode Exit fullscreen mode

添加peerDependecies

由于我们不想在用户项目中安装两次 React，但也需要用户拥有它，因此我们将其添加为，peerDependecies因此将其添加到您的 package.json 文件中

"peerDependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1"
    }
Enter fullscreen mode Exit fullscreen mode

最终的 package.json

现在编辑它看起来像这样

{
    "name": "react-library",
    "version": "1.0.0",
    "description": "your description",
    "main": "dist/index.cjs.js",
    "scripts": {
        "build": "rollup -c"
    },
    "peerDependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5"
    },
    "keywords": [
        "react",
        "keywords"
    ],
    "author": "Your name",
    "license": "MIT",
    "devDependencies": {
        "@babel/cli": "^7.12.10",
        "@babel/core": "^7.12.10",
        "@babel/plugin-transform-runtime": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "@babel/preset-react": "^7.12.10",
        "@rollup/plugin-babel": "^5.2.2",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-styles": "^3.12.2",
    }
}
Enter fullscreen mode Exit fullscreen mode

出版

现在您可以发布代码了。
如果您没有 npm 帐户，请先创建一个。

创建.npmignore

我希望现在你的项目结构看起来是这样的：

|
| - dist
    | - index.esm.js
    | - index.cjs.js
    | - index.umd.js
| - src
    | - index.js
    | - index.css
    | - button.jsx
| - .babelrc
| - package.json
| - rollup.config.js
Enter fullscreen mode Exit fullscreen mode

但是因为我们不想将源代码发布到 npm，所以我们只想发布编译后的代码，然后我们将创建一个.npmignore文件，以防止发布我们不想发布的文件

将其添加到.npmignore文件。

## the src folder
src
.babelrc
rollup.config.js
## node modules folder
node_modules
## incase you have a git repositiory initiated
.git
.gitignore
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
.DS_Store
npm-debug.log
.npmrc

config.gypi
package-lock.json
Enter fullscreen mode Exit fullscreen mode

寻找名字

有时，你可能会尝试发布一个包，却发现该名称已被占用，或者名称与其他包几乎相同，因此最好先搜索一下该包名称是否已被占用。因此，请在命令行中输入以下命令。

npm search [package name]
Enter fullscreen mode Exit fullscreen mode

如果您发现没有人使用它，那么您可以使用该名称。

测试你的包

要测试你的包，你必须转到计算机上的另一个项目并输入

npm link /path/to/your/package
Enter fullscreen mode Exit fullscreen mode

添加 README.md

你还应该添加一个Readme.md文件，该文件将在 npm 上显示，其中包含你的包的描述。如果你曾经在 GitHub 上创建过仓库，你可能会对它很熟悉。

出版

如果一切顺利，那么您可以通过输入以下内容来发布它

npm publish
Enter fullscreen mode Exit fullscreen mode

结论

我希望这篇文章对你有所帮助，如果你有任何问题，请在评论部分留言，所有源代码都可以在Github上找到

鏂囩珷鏉ユ簮锛�https://dev.to/jimjunior/how-to-create-an-npm-library-from-react-components-2m2
Devto 翻译
PREV
最佳 Markdown 编辑器
NEXT
如何在 React 中创建响应式视频播放器