发布npm包-vue组件

最近公司来了一些实习生，刚好又要准备技术分享了，这期就分享一下关于如何发布npm包，以及要注意的一些事项。公司的前端主要用的有vue框架，那这边就以vue为基础发布包。

1. 初始化项目环境

使用 @vue/cli-init 这个工具创建一个简易的vue项目环境，利于组件的开发。

vue init webpack-simple red-font // red-font是项目名

当然，除了这种方式之外，也还有其他方法创建开发环境，npm init 也行（如果你不嫌麻烦的话）。

其实发包思想就是用webpack将你想要打包的东西打包成js，然后执行 npm publish 命令，啪！完事了，好了，文章提前结束了。

2. 创建组件

我随便创建的一个组件

// RedFont.vue
<template>
  <div class="red-font">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'RedFont'
}
</script>
<style lang="css" scoped>
  .red-font{
    color: red;
  }
</style>

这个组件就是我们这次要发布的 npm 包（red-font），可以先将它引入到 App.vue 中看看效果。具体操作我相信你们已经和干饭一样熟练了吧 (- 、-)。

到这里我们的组件已经开发完了，我们的目的就是将这个 RedFont.vue 文件打包，发布。

3. 发布前夕准备工作

我们使用webpack打包需要准备一个入口文件

• 在 src 文件下新建 index.js

• 在 index.js 中引入我们的组件并导出

// index.js

import RedFont from './RedFont.vue'
// 这句可加可不加
// 记住这里，后面要考
// 可以对组件进行全局注册
RedFont.install = Vue => Vue.component(RedFont.name, RedFont); 

export default RedFont

• 修改 webpack.config.js 配置

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.js', // 修改打包的入口文件
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'redfont.js', // 打包后的文件名
    library:'red-font', // 我们引入的时候用的名字  
    libraryTarget: 'umd', // 打包模式 umd支持cjs,amd规范，允许模块能兼容多环境运行
    umdNamedDefine: true // 为amd模块命名
  },
  ...
}

• 打包 npm run build

• 修改 package.json

// package.json

"name": "red-font",
"description": "红色字体组件", 
"version": "1.0.0", // 版本号
"author": "lucas",
"license": "MIT", // 协议
"keywords": ["red-font"], // 用户搜索关键字
"private": false, // 为true发布会报错
"main": "dist/redfont.js", // 包的入口文件
...

代码是随便拷的一段，凑凑文章篇幅，需要注意的我都已经写了注释。

• 新建 .npmignore 文件 npm忽略上传目录的配置文件

// .npmignore 

/src
/node_modules
webpack.config.js

• 编辑 README.md 文件

这个作为npm包详情页的介绍...

4. 注册 npm 的账号（不在分享范畴！）

5. 发布

发布前要确保你目前的 npm 源是官方源而不是淘宝源。

npm config get registry  // 查看npm源

// 如果不是 切换到官方源
npm config set registry=http://registry.npmjs.org // 切换npm源

先登录 npm

npm login

输入账号，密码（输入密码的时候是看不见的，手别抖，完事后自信回车就好），邮箱。

npm whoami // 查看 npm 登录人

发布

npm publish

这样子表示发布成功了。

6. 检验

• 找个测试项目安装 red-font

yarn add red-font 

// or
npm install red-font 

引入

<template>
  <div id="app">
    <red-font>Bingo~</red-font>
  </div>
</template>
<script>
import RedFont from 'red-font';
export default {
  name: 'app',
  components:{
    RedFont
  }
}
</script>

import RedFront from 'red-font' // 说明：这个red-font就是我们上面配置的 library


or

// 进行全局注册
import RedFont from 'red-font';
Vue.use(RedFont)

---

成功啦，文章结束了，散了吧。

7. 最后一点

• 更新包

更新包和发布包一样，每次有调整，重新发布即可。

npm publish

注意 但是每次更新后一定要修改版本号，也就是 version 配置。否则会提示报错You cannot publish over the previously published versions: 版本号。

• 撤销包

npm unpublish red-font --force