npm包开发和发布

前提，我们已经搭建好了Verdaccio、sinopia、nexus（三者任意一个即可）。并在里面配置好相关信息。

本次以nexus为例，下面操作方法默认你已经在nexus里创建了npm-group、npm-hosted、npm-proxy三个库

搭建nexus，可参考使用Nexus搭建npm私服

1.创建项目

npm init

2.新建入口文件

新建index.js文件

import Vue from 'vue'
import tengTable from './packages/tengTable'

const componetArr=[
    tengTable,
]
const install = function(){
    componetArr.forEach(comp=>{
        Vue.use(comp);//挂载组件
    })
}

export default {
    install,
    tengTable
}

后续就可以自己开发组件了

以下是我开发的目录结构（参考element-ui目录结构）

+  |- lib                              // 存放公共js和css的地方
+    |- css                            // css文件夹
+    |- js                             // js文件夹
+  |- packages                         // 存放所有组件的文件夹
+    |- tengTable                      // 以组件名命名的组件文件夹，存放当前组件的全部功能
+       |- src                         // 组件文件夹
+           |- components              // 组件开发的子组件文件夹
+           |- modules                 // 组件开发的备用文件夹，可以把index.vue里相关的方法按功能模块剥离后存放，相当于mixins
+           |- index.vue               // 对应的组件文件
+       |- index.js                    // 组件入口js文件
+  |- src                              // 存放其他配置
+    |- directives                     // 自定义指令文件夹
+    |- mixins                         // 公共混入js文件夹
+    |- transitions                    // 动画文件夹
+  |- types                            // ts文件夹
+  |- package.json                     // npm init 生成配置文件
+  |- index.js                         // 入口文件代码
+  |- README.md                        // 配置文件文档

3.设置npm包地址源

npm config set registry http://192.168.2.28:8081/repository/npm-hosted/

4.登录私有仓库

npm login --registry http://192.168.2.28:8081/repository/npm-hosted/

npm lgoin后面的可以省略

5.执行发布命令

npm publish --registry http://192.168.2.28:8081/repository/npm-hosted/

npm publish后面的可以省略

6.扩展

6-1.切换http://192.168.2.28:8081/repository/npm-group/

使用此地址可以下载公共包，以及发布私有包。

但是发布私有包时候，会报错，没交钱的错：

npm ERR! code E403npm 
ERR! 403 403 Forbidden - PUT http://192.168.2.28:8081/repository/npm-group/test - Deploying to groups is a PRO-licensed feature.            
See https://links.sonatype.com/product-nexus-repositorynpm 
ERR! 403 In most cases, you or one of your dependencies are requestingnpm 
ERR! 403 a package version that is forbidden by your security policy.

6-2.基于其他包二次开发的可以在package.json里配置相应版本的包，以防依赖包更新后部分功能因兼容性无法使用

例如，基于element-ui二次封装了组件，需要npm i element-ui@2.15.10 -S

6-2.验证问题（npm 401）解决

npm ERR! code E401
npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"

很多时候，Nexus的设置是不允许匿名用户访问资源的。这种情况下就需要登录才能访问。使用下面的配置，就不需要每次登录。

在realms里，添加npm Bearer Token Realm到右侧，点击保存即可。

首先使用管理员用户激活npm realms。