封装vue插件并发布到npm详细步骤

创建项目

• 创建项目
• 创建组件
• • 编写每个组件对应的配置文件
  • 最外层index.js文件夹配置
• 配置文件 package.json
• 配置文件webpack.config.js
• 打包
• 测试
• 发布

封装vue的插件用webpack-simple很合适，vue init webpack-simple name 此命令创建我们的项,因为webpack-simple创建的项目文件不会很复杂，操作起来更方便

 

 

 

创建组件

src下新建components文件夹用于存放所有开发的组件 -> 为每一个组件创建一个文件夹，其中存放一个vue组件文件和一个index.js配置文件 -> 在components下的最外层创建一个入口配置文件

编写每个组件对应的配置文件

import operationBtn from "./index.vue";
operationBtn.install = Vue => Vue.component("operationBtn", operationBtn); //operationBtn对应组件的名称，也可以在每个组件中的name里定义调用方法为operationBtn.name
export default operationBtn;

最外层index.js文件夹配置

这是为了方便打包后多个组件的引用

import operationBtn from "./operationBtn/index.js";
import searchBtn from "./searchBtn/index.js";
import selectBtn from "./selectBtn/index.js";
const components = [operationBtn, searchBtn, selectBtn];
const install = function(Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  operationBtn,
  searchBtn,
  selectBtn
};

配置文件 package.json

private改为false，否则无法发布，main是发布后调用的对应文件，version版本号，多次发布时要对version进行更改。

{
  "name": "btn-list",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "author",
  "license": "MIT",
  "private": false,
  "main": "dist/js/btnList.js",
  "directories": {
    "dist": "dist"
  },
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "url-loader": "^4.1.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
  }
}

配置文件webpack.config.js
entry：修改打包的入口文件。
output：修改输出文件到 dist/js下，生成文件名为btnList.js。
library：指定的就是你使用require时的模块名，这里便是require(“btnList”)。
libraryTarget：会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
umdNamedDefine：会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的

var path = require("path");
var webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
  entry:NODE_ENV == "development" ? "./src/main.js" : "./src/components/index.js",
  output: {
    path: path.resolve(__dirname, "./dist/js"),
    publicPath: "/dist/",
    filename: "btnList.js",
    library: "btnList",
    libraryTarget: "umd",
    umdNamedDefine: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {}
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      },
      {
        test: /\.(woff)|(eot)|(ttf)$/,
        loader: "url-loader"
      }
    ]
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  }
};

if (process.env.NODE_ENV === "production") {
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]);
}

打包

npm run build

测试
为了防止发布上去无法使用，可以先pack打包生成压缩包，本地先调用试试。输入 npm pack，会生成一个文件 btn-list-0.1.0.tgz。再用vue init webpack vue-test生成一个新工程把刚才打包好的 btn-list-0.1.0.tgz 这个压缩包放到D盘目录下（哪个位置都行，只要你觉得调用方便）。在当前 vue-test 这个工程目录下，打开控制台，输入 npm install --save-dev D:btn-list-0.1.0.tgz， 安装刚才打包好的文件包。在main.js文件下引用。测试完成之后就能放心的发布到npm上了。

import btnList from 'btn-list'
const { operationBtn, searchBtn,selectBtn } = btnList
Vue.use(operationBtn);
Vue.use(searchBtn);
Vue.use(selectBtn);

发布
注册个npm账号，在你要发布的项目目录执行npm login，输入账号密码和邮箱，然后npm publish就发布成功了。最后登录npm账号看看有没有已经发布的插件。
npm 发布一些常见的错误：
1.no_perms Private mode enable, only admin can publish this module这是因为镜像设置成淘宝镜像了，设置回来即可。

npm config set registry http://registry.npmjs.org　

2.npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?包名被占用，改个包名即可。
3.you must verify your email before publishing a new package邮箱未验证，去官网验证一下邮箱。