私有组件库组件源从搭建到发布npm包一条龙，本地调试&服务器上线

本文链接：https://blog.youkuaiyun.com/luoluoyang23/article/details/127821254

安装步骤

cnpm安装和配置
mysql安装
功能验证

windows本地调试环境搭建

cnpm安装

建议先装个nrm，用来管理npm源

npm install nrm -g

执行nrm ls可以查看所有的源

nrm ls

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
  npmTest ------ http://127.0.0.1:7001/

拉代码到本地

git clone https://github.com/cnpm/cnpmjs.org.git

如果超时拉不了，可以尝试

git config --global http.proxy

    拉下来基本目录结构
在这里插入图片描述
    执行yarn或者npm install，这里推荐npm install安装需要的包，我自己测试的时候有几个包需要单独装，注意一下
    编辑config/index.js，更改配置

database: {
   db: 'cnpmjs', // 数据库名
   host: '127.0.0.1',
   port: 3306, // 端口
   username: 'root', // 用户名,
   password: '123456', // 对于cento或ubuntu如果用root用户名连接数据库,这里请设置密码为空.非root请正常填写
   dialect: 'mysql' // 使用mysql，默认为sqlite
 },
 admins: {
     admin: 'admin@cnpmjs.org' // 这里配置自己的npm用户名和邮箱
 },
 scopes: ['@ttt'], // 私有包会用到
 registryHost: '127.0.0.1:7001', //替换服务器ip
 bindingHost: '0.0.0.0'	// 必要，不改后面访问不了组件源

此处参考了

https://juejin.cn/post/6924226546244796424

改一下package.json，方便待会直接运行调试环境

"scripts": {
    "dev": "set DEBUG=cnpm* & node dispatch.js",
    // 这里只改这一行，其他的别动哦
  },

mysql安装

地址

https://dev.mysql.com/downloads/mysql/

下载后解压安装，建议按配置文件进行安装，方法如下
在解压后的目录中创建my.ini

[mysqld]
basedir=D:\\mysql-8.0.31-winx64
datadir=D:\\mysql-8.0.31-winx64\\data

可以改成自己期望的目录，配置好之后进入bin里面执行命令

mysqld --defaults-file=D:\mysql-8.0.12-winx64\my.ini --initialize --console

一般成功了会输出一个初始密码，拷贝一下后面登录会用到
如果遇到问题可以在排查问题后重新安装，重新安装方法如下

net stop mysql // 如果启动了mysql的话就需要这一步，没启动就略过
mysqld --remove mysql // 然后手动把data文件夹和my.ini文件删除了
mysqld --install // 安装mysql，这里是默认的安装方式，按配置文件安装的方式已经在上方说过了
mysqld --initialize --user=root --console // 初始化mysql

进入mysql

net start mysql // 启动mysql，这一步不要漏了
mysql -u root -p // 进入mysql，输入初始密码，刚刚安装mysql成功时控制台会输出初始密码

版本较高的mysql不改密码不会让你进行其他操作，改密码的命令，改密码的时候别忘了改成刚刚在cnpm里面配置的密码

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';
quit // 退出

再次进入mysql，用改过的密码登录
现在，配置mysql，创建cnpmjs数据库（刚刚在index.js里面配置的啥，这里就创建啥）

create database cnpmjs;	// 不要忘记加分号哦
use cnpmjs;
source docs/db.sql;	// cnpm下方的文件，你放在哪就填相应的路径，要注意相对绝对路径，别填错了

成功了直接退出就行了

功能验证

进入cnpm的目录，执行

nrm add npmTest http://127.0.0.1:7001/
nrm use npmTest
npm run dev

    一般这样就是成功运行了
在这里插入图片描述
    浏览器访问一下localhost:7002

    验证其他功能

npm adduser // 注册用户 设置用户名，密码和email，成功了会直接登录
npm login	// 正常登录
npm publish	// 发布

作为一个负责任的博主🥷，肯定要帮助大家走完整个流程，所以我们要测试是否能真的发布，这里直接用dumi比较快
地址：

https://d.umijs.org/zh-CN/guide

    按照官网说明执行几个命令就行了
在这里插入图片描述
    脚手架搭好后别忘了执行yarn下载依赖包
    为了避免麻烦，这里我们先暂时改一个参数，就改一个，package.json下面

    都没问题后直接发布，注意肯定要在dumi搭好的脚手架目录下面执行

npm publish

    别忘了要用cnpm中admins授权的用户发布哦
在这里插入图片描述
    成功发布，我这里是mino-comp，我们回到7002去看看有没有

    很明显，成功了

好了，本地调试环境的搭建就到这，搭建本地环境主要还是方便调试，正常我们可以是需要把组件源挂在服务器上的，其实非常简单，废话少说，发车

组件源服务器上线

如果是刚买的服务器可能node和nvm啥的都没整，新手可以参考我之前的文章，里面有提到过具体的安装方法

https://blog.youkuaiyun.com/luoluoyang23/article/details/126210148

cnpm安装

有人可能会觉得，直接把本地的cnpmjs拖到服务器上不就行了，有啥讲的。是的，这里再次提这个主要是有个坑想让大家避开，cnpmjs在服务器上是会执行nodejsctl（cnpmjs中的一个脚本文件），但是这个文件在我们本地改的时候格式受到影响了，因此在Linux中是没办法直接执行的
这里推荐一篇文章

https://blog.youkuaiyun.com/weixin_42029127/article/details/123712826

这篇是转载的，转来转去的太乱了我没找到原文链接，有知道出处的可以发我我改成原文链接

mysql安装

我是Ubuntu，能直接执行命令安装

apt-get install mysql-server

看网上这块踩坑的人挺多的，我另外一台服务器也是Ubuntu但是装不了，实在不行建议大家离线安装吧

https://www.cnblogs.com/dengshihuang/p/8029092.html

    还不行就直接去官网下个bundle包，解压后一个一个dpkg安装吧
在这里插入图片描述
    安装好后的配置和我们刚刚在本地是一样的

功能验证

npm run start

脚本会让Linux开一个进程，这个进程就是组件源的，我们在本地进行测试，用nrm把服务器的地址加进去，服务器ip:7001就是组件源地址，我们也可以去7002端口看一看
在这里插入图片描述
发布啥的都和刚刚本地是一样的，只是地址不一样了，这里就不再验证了，只是需要提一下，cnpmjs中配置的 bindingHost 一定要改，不然是访问不了的，这个在搭建本地环境的时候已经提过了