开发一个vue插件并且发布到npm（二）-白红宇

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

一、发布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配置

首先安装

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 [
    
      | 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。

参考：