公司项目需求，一个系统包含多个子系统，子系统目前跟系统风格基本一致，也有很多公共部分，三年前做过一个类似这种的，拆分出公共项目和子项目分别维护，这也应该算是现在造的名词前端微服务的一种吧，今天把方案再次梳理下（公用模块单独打包成npm，A和B依赖这个公用模块）！

发布包到自己的npm私服

I.npm登陆到私服

因为是私服，发布的时候需要先让npm能够登录上私服才能操作

npm login --registry = http://192.168.1.254:7979/***/

在上面命令加上--always-auth，可以记住登录用户，下次直接发布即可，

接下来依次输入用户名/密码/邮箱 这里需要注意的是，用户名和密码是私服上配置好了的，邮箱不重要，随便都行。

登录成功后是下面酱

Logged in as dev on http://192.168.1.254:7979/***/

II.上传包

npm publish --registry=http://192.168.1.254:7979/***/

注意中途不要随意切换文件夹，虽然没有出什么问题，后来想要强制删除的时候一直出错。

III.下载包

操作都是一样的

npm install 包名 --registry=http://192.168.1.254:7979/***/

因为npm私服配置原因，发布包和下载包的地址有一点差别(public关联snapshots快照)

IV.删除包

记得要加--force

最后路径那里加上自己的包名

还要给登录到npm私服的用户加上删除的权限

如果有多个版本的包，还需要加上版本号 => 包名@1.0.0

如果公司有jenkins，服务器上使用always-auth登录后，jenkins构建命令那里直接npm publish 即可

npm login --registry = http://192.168.1.254:7979/***/ --always-auth

npm 私服 使用Nexus搭建 问题汇总

运行npm任何命令都是报错 401 unauthorized,无论用管理员还是超级用户

解决：将包发布到nexus npm仓库需要设置一下 Nexus Repository Manager 的权限。否则无法登陆到我们的私服。在Security->Realms栏目里，将npm Bearer Token Realm 选入Active。

npm publish 报错put 400 bad request

报错原因：npm的镜像源管理工具nrm 使用的是npm-group 的仓库地址

解决方案：package.json 里面加上 publishConfig: {registry: 发布地址}

项目结构

将登录和跳转系统页单独抽出一个vue项目，首先在根目录中创建文件index.js，将需要导出的组件写在index.js中，内容示例如下：

import request from './src/common/request'	

	
export {	
  request	
}

公共项目中如果引用此项目下的一定要用相对路径，如果在子系统单独配置，则使用别名@，如图：

子系统使用公共系统中的路径需要现在vue.config.js中配置别名路径

chainWebpack (config) {	
    config.resolve.alias.set('@', resolve('src')).set('@module_**', resolve('node_modules/包名/src'))	
}

vue.config.js中入口文件配置

configureWebpack: config => {	
    config.entry.app = ['./node_modules/包名/src/main.ts'];	
  },

每个子系统路由的配置：

npm link的使用

开发过程中，公共系统难免会频繁改动，这时候npm link是最好的选择

首先进入公共系统

npm link

其次进入子系统

npm link 包名

将这个公共的项目通过软连接的方式引入到项目里面来了。

这时修改公共项目下面的任意代码都会实时生效，不用打包，也不用重启了。

当然，npm link的方式仅建议在功能开发的过程中使用，若公共模块基本稳定了，还是建议使用npm publish的方式，将公共包以node_module的方式引入。

结尾彩蛋

欢迎关注前端之阶公众号，获取更多前端知识，加入前端大群，与知名互联网大佬做朋友，开启共同学习新篇章！