如何制作react组件包上传到npm

Posted 2023-04-19

参考技术A

虽说现在市面上组件库相当多了，但是还有一些组件特定场景市面上没有，公司内部一些不同项目，有类似相同组件可以直接复用，避免重复造轮子，就可以直接制作一个npm包，下次直接使用。

注意：文中的每一步都很重要，都是踩过的坑

1、注册npm账号
地址： https://www.npmjs.com/signup
注意：注册完后，记得验证你的邮件地址！一定！否则会在提交组件包的时候报403错误，那是因为没有验证你的邮箱。

1、创建新的文件夹
2、进入该文件夹，使用cmd命令，npm进入安装项目流程

3、对应的字段：

有需要可以自行安装自己要的依赖，上面几个是我写组件必要的几个依赖，因为我没有写对应的依赖版本所以安装时候会以最新版本安装。

1、新建如下目录结构和文件

2、编写webpack.config.js的配置，以下是最基础的配置

上面的less-loader没有启用lessmodules模块化比较不好，假设现在项目有好几个组件，那么模块化就可以避免我们不同组件的样式污染，如果不开启就不生效，如下例子：

所以得将webpack.config.js修改如下：

接下来往babel.config.js添加编译时候需要的loader配置：

3、编写组件
这个是核心部分，就是说这里是你的组件
------------- ./src/index.jsx

------------- ./src/index.less

4、对外暴露组件，编辑根目录下的index.js文件
我这里叫Test，使用组件包引入时候就是Test组件。别人在引用组件包时候会从该文件作为入口（package.json的main字段可以配置），这个文件有两种写法，第一种：

第二种：

5、编写webpack读取的入口文件 public/app.js
webpack启动、编译、打包都会从这个文件作为入口（webpack那边配置的）

6、编写html模板，public/index.html文件。
我们知道spa单页面都是依据一个html模板上面引入js创建虚拟dom生成到这个html上面，所以需要有一个挂载的实例模板。

7、编写.gitignore文件
这个文件可以配置git上传时候忽略哪些文件不想传上去，同时发布组件包的时候它也会按照这个文件来，忽略哪些不上传。

8、添加项目启动命令：修改package.json文件
给该文件的scripts里添加两个系统命令，一个是启动命令，一个是打包命令（制作组件包用的比较少）。注意webpack4的版本可能不是 webpack server --mode development，这个需要自己对应版本。

说明是node版本问题，需要安装高点版本的node，可以使用nvm来管理node版本，这里不多说，我切换为node 12.0.0版本就可以。

到此为止，我们已经配置好了工程，接下来需要把组件包发布上去
1、发布规则

例如你是淘宝源你需要：
查看设置过的所有的源：npm config get registry
设置当前源为npm： npm config set registry https://registry.npmjs.org/
发布完成后设置回淘宝源：npm config set registry https://registry.npm.taobao.org

2、发布流程
1、登录注册好的npm账号：npm login
输入对应的账号、密码、邮箱即可

如何简单的发布一个react组件npm包

可以简单使用https://www.npmjs.com/package/create-component-lib这个npm进行发布

该包的具体的实现方式https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b

该教程中更正点

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env
我只安装@babel/cli的时候npm run build 会失败
2. npm publish

 

如果要删除你发布的包

npm unpublish name@version