将多项目公共资源包发布到npm上

·  阅读 285

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情

场景一

若代码为私有的模块,因为某些原因不能发布到公共的npm仓库,但是又需要在多个项目间共享。

解决方法:可以在package.json中来使用git url获取特定的公用代码

  1. 先新建一个vue项目
vue init webpack rzh-vue-ui
复制代码
  1. 在新建项目中加入公共的组件模块 在这里插入图片描述

如图所示,我新建了一个packages目录,在目录下加入了Hfooter组件代码, 并在packages目录下新建一个index.js用来export组件

import Hfooter from './components/rzhui/Hfooter'
export {
  Hfooter
}
复制代码
  1. 在package.json中添加模块的入口文件
"module": "packages/index.js",
复制代码

在这里插入图片描述

  1. 确保项目运行无误后,将项目push到git库上。

  2. 再在需要的使用组件的项目的package.json文件中的devDependencies中添加组件库名和git代码地址

"publiccomponents": "git://github.com/user/repo.git#ref",
复制代码

其中的#ref部分是可选的,它可以是一个分支(如master),标签(如0.0.1)或部分或完整的commit id。 在这里插入图片描述

  1. 执行依赖拉取,即可在node_modules中找到你的组件库
yarn install 或 npm i
复制代码
  1. 再在需要使用组件的地方进行引入组件即可
import {Hfooter} from 'publiccomponents'
复制代码

场景二

若代码为公共模块,允许发布到公共的npm仓库。

  1. npm官网上新建账号,并验证邮箱。
  2. 新建项目。执行场景一,步骤1、2、3。
  3. 在package.json中将private设置为false。
"private": false,
复制代码
  1. 在命令行,查看是否登陆npm
npm whoami
复制代码

若出现用户则登陆成功,否则执行

npm login
复制代码

进行登录

  1. 发布模块
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
复制代码

需要去官网验证你的邮箱

  1. 发布成功后就可以在npm官网找到你的项目了。
  2. 使用,可在需要的使用组件的项目的package.json文件中执行
yarn add 组件库包名 或者 npm i 组件库包名
复制代码
  1. 再在需要使用组件的地方进行引入组件即可
import {Hfooter} from 'publiccomponents'
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改