vueCli发布npm包

WebGirl
450 阅读7分钟

vue发布组件到npm仓库

环境准备

因为我们此次封装的是Vue组件，所以直接在Vue脚手架项目里面进行封装即可。

（1）初始化vue项目 vue create hello-world

（2）运行项目 npm run serve

组件封装

新建package文件夹

因为我们可能会封装多个组件，所以在src下面新建一个package文件夹用来存放所有需要上传的组件。

image.png

编写组件代码

这里打算封装两个组件：rj-button、rj-input

以rj-button组件为例

<template>
  <div>
    <button>测试按钮</button>
  </div>
</template>
<script>
export default {
  name: 'rj-button', // 组件名
}
</script>
<style scoped>
button {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
button:focus {
  border: 1px solid black;
}
</style>

然后我们引用到App.vue组件里面验证一下，看组件是否可用，代码如下：

<template>
  <div id="app">
    <img alt="Vue logo"
         src="./assets/logo.png">
    <RjButton />
  </div>
</template>

<script>
import RjButton from './package/rj-button/index.vue'
export default {
  name: 'App',
  components: {
    RjButton,
  },
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

image.png

使用vue插件模式

这一步是封装组件的重点，用到了vue提供的公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。

在package目录下新建index.js文件，代码如下：

import RjButton from './rj-button/index.vue';// 引入封装好的组件
const coms = [RjButton];// 将来如果有其他组件，都可以写在这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com)
  })
}


export default install;// 这个方法以后再使用的时候就可以被use调用

image.png

上传代码主要的一项工作就是将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。

组件打包

到这里为止，我们的组件封装基本就完成了，当然组件封装成什么样得看自己的业务需求了，接下来我们就需要将组件进行打包了。

修改我们项目的package.json文件，配置打包命令：

    "package": "vue-cli-service build --target lib ./src/package/index.js --name rj-ui --dest rjDist"

image.png

打包命令解释：

  • --target lib关键字:指定打包的目录
  • --name:打包后的文件名字
  • --dest:打包后的文件夹名称

然后执行打包命令 npm run package

打包执行完成后我们项目目录下就会生成一个rjDist文件夹，存放的是打包后的文件

image.png

image.png

发布到npm

初始化package.json

想要发布到npm仓库，我们还得在rjDist文件夹下初始化一个package.json文件。进入rjDist目录，执行命令：npm init -y

image.png

这里仅仅是测试，所以不需要更改package.json文件，如果是生成的话，最好加上版本描述和版本号等等，其中name字段使我们上传到npm仓库后的名称。

发布到npm仓库

（1）注册账号

想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码、和邮箱，发布的时候可能会用到。

在www.npmjs.com/上注册账号；或者在终端输入npm adduser也可创建账户噢；

（2）设置npm源

有些小伙伴本地的npm镜像源采用的是淘宝镜像源或者其他的，如果想要发布npm包，我们需要把bpm源切换为官方的源，命令如下： npm config set registry="https://registry.npmjs.org"

npm包发布必须是npm的源镜像

  • npm config get registry 查看镜像 image.png
  • 通过npm config set registry https://registr.npmjs.org 切换为npm镜像

（3）添加npm用户 进入rjDist目录，添加npm用户，执行命令： npm adduser

这里会让你填写用户等等，如果之前设置过即可跳过此步。

（4）登录：npm login

  • 登录的时候需要输入用户名、邮箱、密码

  • npm whoami 检验是否登录成功

（5）发布npm 在rjDist目录下执行命令npm publish

如果发布失败可能是名字重复了，发布成功后，即可在npm官网上查看自己的npm包

image.png

image.png

package.json发布包相关字段说明

  • name 包名
  • version 版本号
  • description：描述信息
  • main: 入口文件
  • files：会把哪些代码发布出去
  • private：是否私有，一般都是false

image.png

从npm中安装使用

直接执行安装命令：

npm install rong-ui-test

然后在main.js引用注册，代码如下：

import RongUITest from 'rong-ui-test';
import 'rong-ui-test/rj-ui.css';
Vue.use(RongUITest)

这里单独引用了css，就和element-ui一样需要单独引入样式文件。

修改App.vue文件，直接使用组件rj-button,代码如下：

<template>
  <div id="app">
    <img alt="Vue logo"
         src="./assets/logo.png">
    <rj-button />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

展示如下： image.png

到这里我们的组件就封装好了，并且可以直接从npm仓库下载使用。

总结

总体来说Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性能高的公用组件。

发布npm遇到的一些坑

包名重复

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/my-custom - You do not have permission to publish "my-custom". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

用npm打包时遇到了，打包权限问题,这种情况在npmjs保证没有问题的前提下，在package.json中修改你的包名就可以了，再重新npm publish一下基本上就没有问题了

需要登录

npm ERR! code ENEEDAUTH
npm ERR! need auth auth required for publishing
npm ERR! need auth You need to authorize this machine using `npm adduser`

后面已经注明了，输入npm adduser重新登录就可以了，过程和npm login一样，这个问题在你切换了 npm 源之后或登录过期后都有可能发生。

只有管理员才有权限发布

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! [no_perms] Private mode enable, only admin can publish this module [no_perms] Private mode enable, only admin can publish this module: your-package

这个是你的源设置成第三方源的时候才有可能发生，比如设置了淘宝源就可能会导致该问题。只要把源改回默认的就可以了。

包名过于类似

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! Package name too similar to existing packages; try renaming your package to '@hopgoldy/auto-git' and publishing with 'npm publish --access=public' instead : your-package

如果npm上已经有了不少和你的包名类似的包，就会出现这个问题，在package.json中修改你的包名就可以了

无法发布到私有包

npm ERR! publish Failed PUT 402
npm ERR! code E402
npm ERR! You must sign up for private packages :

这个当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:

npm publish --access public

这里我们通过命令行选项 --access public 声明为公有包，也可通过 package.json 中的 publicConfig 字段配置声明。

补充npm命令

npm registry原意为记录、登记、登记处的意思，这里指的也就是node包存放的服务器地址。

  • npm config get registry 查看镜像 image.png
  • 通过npm config set registry https://registr.npmjs.org 切换为npm镜像

默认情况下我们执行 npm install * 这个命令时就是从registry.npmjs.org 这个服务器上将node包下载到本地，但该服务器在美国，这样下载就会非常慢，所以我们把 registry改为国内淘宝镜像

  • npm config set registry http://registry.npm.taobao.org 将registry设置为淘宝镜像
  • npm ls查看当前目录下安装了哪些node包
  • npm login 登陆npm
-> npm login

Username: leinov
Password:
Email: (this IS public)
Email: (this IS public) 1425795233@qq.com
Logged in as leinov on http://registry.npmjs.org/.
  • npm whoami查看当前npm用户

如下提示表明还未登陆npm 该命令只在登陆状态下使用，或者使用npm adduser添加新用户

npm ERR! code ENEEDAUTH
npm ERR! need auth this command requires you to be logged in.
npm ERR! need auth You need to authorize this machine using `npm adduser`

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/leinov/.npm/_logs/2018-09-14T08_13_10_900Z-debug.log
  • npm publish 发布本地包,进入本地项目目录执行下面命令
  • npm get prefix 查看node安装路径
  • npm root -g 查看全局node包
  • npm cache clean -f npm清理缓存
  • npm version patch 补丁版本，最后一位数加1
  • npm version minor 增加了新功能，中间的数字加1
  • npm version major 大改动，不向下兼容，第一位数字加1
  • npm unpublish --force 强制卸载
  • npm unpublish 包名@版本号 删除某个版本

如何发布私有包

从 开始npm@2.7.0，如果您是付费用户，则可以将私有包发布到 npm 注册表。

  1. 注册一个付费帐户。
  2. 创建并初始化具有范围名称的包，例如"name": "@username/module-name".
  3. 发布您的包。默认情况下，npm 假定作用域包是私有的——这就是你想要的。但是，如果您希望将范围包公开，则可以使用该--access=public选项进行发布。

image.png

avatar
文章
阅读
粉丝