开发一个vue插件并且发布到npm(二)

·  阅读 418

在上一篇中:传送门,我们已经开发好了插件,并且通过放在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的版本

  1. 可以通过直接修改package.json文件中的version
  2. 通过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

参考:

分类:
阅读
标签: