如何在npm上传自己写的vue插件

[1StepEngineer]

参考文档：
https://blog.csdn.net/cvper/article/details/79051048

https://www.jianshu.com/p/9a9ed7eaf655

1 开发

1.1 项目初始化

通过vue cli构建 vue-roomReservationPlugin工程，根据需求封装了roomRerservation.vue的插件

1.2 添加index.js

import RoomRes from './components/roomRerservation.vue'
const roomRes={
  install:function (Vue) {
    Vue.component('roomRes',RoomRes)
  }
};
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(roomRes)
}
export default roomRes

2 修改配置项

2.1 修改package.json

{
  "name": "vue-room-res",
  "version": "4.0.4",
  "description": "A Vue.js project",
  "author": "'Mirror198829' <'412366756@qq.com'>",
  "private": false, //true 修改为 false
  //新增：若不配置，其他项目就不得用`import XX from '包名'`引用，
  //只能以包名作为起点来指定相对的路径
  "main": "dist/room-res.min.js",  
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  //新增:项目官网的url
  "homepage": "https://github.com/Mirror198829/vue-roomReservationPlugin",
  //新增：指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "https://github.com/Mirror198829/vue-roomReservationPlugin.git"
  }, 
  //新增：指定关键字
  "keywords": [
   "vue",
   "roomReservation"
  ], 
  "dependencies": {……},
  "devDependencies": {……},
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [……]
}

2.2 修改webpack.config.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    //app:'./src/main.js'
    app: './src/index.js'
  },

2.3 修改webpack.prod.conf.js

• output

output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '',
    filename: 'room-res.min.js',
    library: 'RoomRes',
    libraryTarget: 'umd',
    umdNamedDefine: true
}

• externals

externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
}

• plugins

new ExtractTextPlugin({
   filename: 'room-res.min.css'
}),

• 注释以下代码

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    
 new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

3 发布

3.1 本地测试

打包到本地使用
npm run build
npm pack

npm pack之后，会在当前目录生成 vue-room-res-4.0.3.tgz文件
打开一个新vue项目，在当前路径下执行

cnpm install 路径/vue-room-res-4.0.3.tgz

在新项目入口文件（main.js）中引入

import RoomRes from 'vue-room-res'
import 'vue-room-res/dist/room-res.min.css'
Vue.use(RoomRes)

在组件中使用

<template>
  <div id="app">
    <router-view/>
    <room-res></room-res>
  </div>
</template>

3.2 npm发布

执行npm publish即可

其他说明

npm 发布问题

npm publish在发布前有以下几点注意:

1. 得确保代码已经提交git仓库，否则会提示 is not clean
2. 修改版本，npm version patch

如何更新已有npm模块

一、 本地更新包版本，npm version <update_type>

1. 查看版本npm view cjmodule123123 versions

E:\code\cjmodule  (cjmodule123123@2.0.2)
λ npm view cjmodule123123 versions
[ '1.0.0', '2.0.0', '2.0.1', '2.0.2' ]

2. 更新版本npm version <update_type>
<update_type>三个参数
   
   patch：补丁
   minor：小修小改
   major：大修改

• 比如我想来个1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch
• 比如我想来个1.1.0版本，注意，是第二位修改了增1，那么命令： npm version minor
• 比如我想来个2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major

二、npm publish提交远端npm中
三、常用命令
npm unpublish cjmodule123123 --force