开发一个vue插件并且发布到npm（二）在发布之前，先到npm官网注册账号，这里跳过注册步骤。发布成功。安装成功，并

在上一篇中：传送门，我们已经开发好了插件，并且通过放在node_modules能直接使用，这一篇就把插件发布到npm，并且配置webpack相关。

一、发布npm

在发布之前，先到npm官网注册账号，这里跳过注册步骤。

1、登录npm

通过命令行工具进入vue-modal-plugins目录，执行命令：

npm login // 登录npm

输入用户名密码及邮箱就登录成功了

2、发布

执行命令：

npm publish

发布成功。

使用 cnpm 的注意报错:
no_perms Private mode enable, only admin can publish this module

设置回原本的就可以了:
npm config set registry http://registry.npmjs.org

在npm官网就能找到我们的插件了

3、测试

我们测试一下从npm下载到项目中能不能使用,首先我们手动删除node_modules里面的vue-modal-plugins，然后从npm下载

cnpm install vue-modal-plugins --save

安装成功，并且能正常使用。
但是有些同学可能会问，这么简单，那要是想要在静态html引入使用，或者通过amd，commonjs方式引入怎么办呢？并且插件中想要使用stylus，scss等等，这时候就需要配置webpack啦。

二、webpack配置

webpack文档
首先安装

cnpm install webpack webpack-cli --save-dev

cnpm install @babel/cli @babel/core @babel/preset-env babel-polyfill babel-loader --save-dev

cnpm install vue vue-loader vue-template-compiler --save-dev

cnpm install stylus-loader stylus style-loader css-loader --save-dev

1、在根目录新建一个文件，命名为webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: './src/lib/index.js', // 入口文件
  output: {
    path: path.join(__dirname, 'dist'), // 输出路径
    filename: 'vue-modal-plugins.js', // 打包输出文件类型
    library: 'vueModalPlugins', // string,导出库(exported library)的名称
    libraryTarget: 'umd' // 通用模块定义,导出库(exported library)的类型
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.styl(us)?$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
        include: path.join(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  mode: 'development'
}

为了使在静态html引入插件能执行，我们要修改index.js文件，加上一句

import vueModalPlugins from './vue-modal-plugins.vue'
// 初始化vue插件对象
let Modal = {}
Modal.install = function (Vue, options) {
    ...
}
...

// 如果是静态html页面引入，则手动注册
if (window.Vue) {
  Vue.use(Modal)
}

...
export default Modal

配置完之后在命令行写webpack打包
根目录就生成dist文件夹

2.在静态html文件引入插件，测试

测试成功！！！

三、更新npm

修改了内容之后，发布之前必须要修改package.json的版本

可以通过直接修改package.json文件中的version
通过npm version命令来进行版本控制

npm version [<newversion> | major | minor | patch | premajor | preminor | 
prepatch | prerelease | from-git]

其语义为：

major：主版本号（大版本）
minor：次版本号（小更新）
patch：补丁号（补丁）
premajor：预备主版本
preminor: 预备次版本
prepatch：预备补丁版本
prerelease：预发布版本

如初始版本为 1.0.0，执行相关类型命令后，对应的语意为：

npm version patch  // 1.0.1 表示小的bug修复
npm version minor // 1.1.0 表示新增一些小功能
npm version mmajor // 2.0.0 表示大的版本或大升级
npm version preminor // 1.1.0-0 后面多了个0，表示预发布

在这里我们直接执行npm version patch，再发布npm publish。

参考：

NPM包（模块）发布、更新、撤销发布