npm私服搭建及npm包开发和发布 — verdaccio

本文是基于verdaccio在服务器搭建私有npm服务器的简单介绍，如果有错误的地方或者可以优化的地方，敬请广大码友指出及指点，感谢！

相关错误处理，可以参考npm私服搭建及npm包开发和发布相关错误处理 — verdaccio

verdaccio的相关操作：

verdaccio操作指令

操作	指令	备注
安装verdaccio	npm i -g verdaccio	-
启动verdaccio	verdaccio	请查看“操作指令详细备注” - 1
配置私有源	npm set registry http://xxx.xxx.xx.xx:4873/	搭建的服务器的地址
创建用户	npm adduser --registry http://xxx.xxx.xx.xx:4873	指向搭建的服务器的地址
添加CA信息	npm set ca null	如果您使用 HTTPS，请添加适当的 CA 信息（“null”表示从操作系统获取 CA 列表）
登录npm	npm login	请查看“操作指令详细备注” - 2
发布npm包	npm publish --registry http://xxx.xxx.xx.xx:4873

操作指令详细备注：

1.启动成功

2.如果未注册npm，请先注册，本文章不做注册介绍

如果修改过npm的镜像，请修改镜像至npm原镜像

镜像切换

  // 查看当前使用的镜像
  npm config get registry
  // 切换淘宝镜像
  npm config set registry https://registry.npm.taobao.org
  // 切换npm原镜像
  npm config set registry https://registry.npmjs.org

登录成功（登录时密码不会显示，还请小心输入，如果是第一次登录，会验证邮箱内的认证动态密码）

 搭建步骤（Linux）：

1. 找一台Linux服务器，比如在 /usr/local/lib 下，大约2G左右就OK了
2. 在合适的（你喜欢的）目录下安装node.js

   // 安装wget,安装过可以跳过:
   yum install -y wget
   // 下载,版本可以选择适合自己的：
   wget https://nodejs.org/dist/v10.6.0/node-v10.6.0-linux-x64.tar.xz
   // 解压：
   tar -xvf node-v10.6.0-linux-x64.tar.xz
   // 重命名安装目录
   mv node-v10.6.0-linux-x64 nodejs
   // 建立软连接
   ln -s /usr/local/lib/nodejs/bin/npm /usr/local/bin/
   ln -s /usr/local/lib/nodejs/bin/node /usr/local/bin/

3.  执行 node -v 和 npm -v 监测是否安装成功
4. 全局安装 verdaccio： npm i verdaccio -g 
5. 全局安装pm2，用来守护node进程： npm i pm2 -g 
6. 安装Nginx，仍然在安装verdaccio的路径下安装

// 下载：
wget http://nginx.org/download/nginx-1.13.7.tar.gz

// 解压：
tar -zxvf nginx-1.13.7.tar.gz

// 换个名字：
mv nginx-1.13.7 nginx

// 进入安装目录：
cd nginx

// 执行：
./configure

// 执行：
make && make install

// cd conf/修改nginx.conf，加上这一段：

server {
  listen 80;
  server_name registry.npm.your.server;
  location / {
    proxy_pass http://127.0.0.1:4873/;
    proxy_set_header Host $host;
  }
}

建立软连接： ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/  

启动Nginx： sudo nginx  （重启命令： sudo nginx -s reload ）

配置访问ip：找到 config.yaml 文件，添加 listen: xxx.xxx.xxx.xxx:4873  

7.启动pm2服务，执行 pm2 start verdaccio ，然后访问浏览器 http://服务器Ip，出现以下页面者代表安装成功。

 本地服务搭建：

1. 安装 npm i -g verdaccio 
2. 启动 verdaccio  
3. 添加用户： npm adduser --registry http://localhost:4873/  
4.  给需要添加到服务的项目添加源信息，在项目的根目录增加 .npmrc 文件
   1. 
5. 配置好后执行 npm publish  后访问浏览器 localhost:4873  就可以看到上传的npm包了

 

 

 npm包开发：

1. 准备好想要发布的组件，例如meta-echarts-box.vue
2. 在你觉得合适的项目目录下创建入口文件 - index.js，导出想要打包上传的组件。我是在src/compoments目录下创建的

   // 需要打包的组件
   import metaEchartsBox from "./meta/meta-echarts-box.vue";
   import metaSearch from "./meta/meta-search.vue";
   
   const Components = {
     metaEchartsBox,
     metaSearch
   };
   // 批量组件注册
   function install(app) {
     Object.keys(Components).forEach(v => {
       app.component(v, Components[v])
     })
   }
   export default {
     install,
     metaEchartsBox,
     metaSearch
   }

   1. 
3. 配置打包脚本 - package.json

   "name": "tilamisu-web-components",
   "version": "0.0.4",
   "private": false,
   "main": "./dist/tilamisu-web-components.common.js",
   "author": "tilamisu",
   "license": "",
   "files": [
     "dist/*",
     "*.json",
     "*.js"
   ],
   "scripts": {
     "build-bundle": "vue-cli-service build --target lib --name tilamisu-web-components ./src/components/index.js",
   },

    注：

   1. 

   2. name: 包名，后续在npm中搜索全靠它，**跟项目名字没有关系**。

   3. version：版本号，每发布一次npm包就要增加一个版本，每个版本不能重复。

   4. description：描述。

   5. main: 本包向外暴露的文件，很重要，一定要和你打包出来的文件名一模一样。

   6. private: true/false 是否为私有。一般为false否则只有自己能使用。

   7. keywords: npm检索的关键字。

   8. author: 作者。

   9. license: ISC。

4. 打包 -  npm run build-bundle  

   1. 

5. 发布 -   npm publish --registry http://localhost:4873/ 

   1. 发布时如果发布的版本已存在或者npm名称已存在（可以在npm官网搜索是否已存在）时发布会失败

6. 安装 -  npm i tilamisu-web-components 

   1. 如果安装找不到，也可以指定地址下载安装 -  npm i tilamisu-web-components --registry http://localhost:4873  

7. 使用和其他三方插件一样

   1. 

      import { createApp } from 'vue'
      import App from './App.vue'
      
      import webComponents from 'tilamisu-web-components'
      const app = createApp(App);
      
      app.use(webComponents).mount('#app');

   2.  使用时的名称为第2步入口文件内导出的组件名称

       

8. 删除发布的包 - npm unpublish xxxx --force  

   1. npm unpublish 命令只能删除 72 小时以内发布的包
   2. npm unpublish 删除的包，在 24 小时内不允许重复发布
9. 补充：将打好的包直接本地使用
   1.  npm pack  - 在执行完 npm run build-bundle​ ​之后执行 npm pack 可以将编译好的文件打成tgz压缩包
   2. npm i xxx.tgz(包名)就可以直接在本地使用你打好的包了​​​​​