场景一
若代码为私有的模块，因为某些原因不能发布到公共的npm仓库，但是又需要在多个项目间共享。
解决方法：可以在package.json中来使用git url获取特定的公用代码
1.先新建一个vue项目
vue init webpack rzh-vue-ui
2.在新建项目中加入公共的组件模块
在这里插入图片描述
如图所示，我新建了一个packages目录，在目录下加入了Hfooter组件代码,
并在packages目录下新建一个index.js用来export组件
import Hfooter from './components/rzhui/Hfooter'
export {
Hfooter
}
3.在package.json中添加模块的入口文件
"module": "packages/index.js",
在这里插入图片描述
4.确保项目运行无误后，将项目push到git库上。
5.再在需要的使用组件的项目的package.json文件中的devDependencies中添加组件库名和git代码地址
"publiccomponents": "git://github.com/user/repo.git#ref",
其中的#ref部分是可选的，它可以是一个分支(如master)，标签(如0.0.1)或部分或完整的commit id。
6.执行依赖拉取，即可在node_modules中找到你的组件库
yarn install 或 npm i
7.再在需要使用组件的地方进行引入组件即可
import {Hfooter} from 'publiccomponents'
场景二
若代码为公共模块，允许发布到公共的npm仓库。
1.在npm官网上新建账号，并验证邮箱。
2.新建项目。执行场景一，步骤1、2、3。
3.在package.json中将private设置为false。
"private": false,
4.在命令行，查看是否登陆npm
npm whoami
若出现用户则登陆成功，否则执行
npm login
进行登录
5.发布模块
npm publish
也许经历和我相同的报错
报错一:
npm ERR! [no_perms] Private mode enable, only admin can publish this module [no_perms] Private mode enable, only admin can publish this module: wqui
是因为使用了淘宝镜像，切换一下即可
npm config set registry http://registry.npmjs.org/
报错二:
npm ERR! Package name too similar to existing packages; try renaming your package to '@wqsmart/wqui' and publishing with 'npm publish --access=public' instead : wqui
包名重复，在package.json中换一个name
报错三：
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : wq-npm-demo-no1
需要去官网验证你的邮箱
6.发布成功后就可以在npm官网找到你的项目了。
7.使用，可在需要的使用组件的项目的package.json文件中执行
yarn add 组件库包名 或者 npm i 组件库包名
8.再在需要使用组件的地方进行引入组件即可
import {Hfooter} from 'publiccomponents'
整理不易，老铁们赞点起来～～～
网友评论