发布npm包以及注意事项（vue）

发布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
复制代码

没啦，一滴都没啦，困了～！

若是有什么问题，欢迎你们留言指正，谢谢～