用Vue开发通用组件（含vuex）并发布到npm

创建项目

推荐使用 vue init webpack-simple project-name

webpack配置

var path = require("path");
var webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV;
const VueLoaderPlugn = require("vue-loader/lib/plugin");

module.exports = {
  entry: NODE_ENV == "development" ? "./src/main.js" : "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/", 
    filename: "v-drawer.js", // npm run build生成的文件名
    library: "v-drawer", // 指定的就是你使用require时的模块名
    libraryTarget: "umd", // 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            less: ["vue-style-loader", "css-loader", "less-loader"]
          }
        }
      },
      {
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"]
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  plugins: [new VueLoaderPlugn()]
};

if (process.env.NODE_ENV === "production") {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]);
}

配置index.js

// 组件
import Drawer from "./components/Drawer";
import DrawerItem from "./components/Drawer-item";
// vuex的store文件
import drawerStore from "./store/drawer";

const components = [Drawer, DrawerItem];

// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.component("v-drawer", components);
}

// opts是用户传入的store
const install = function(Vue, opts = {}) {
  if (!opts.store) {
    console.log("Please provide a store!");
  }
  // 动态注册store
  opts.store.registerModule("drawer", drawerStore);

  components.map(component => {
    Vue.component(component.name, component);
  });
};

if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Drawer,
  DrawerItem
};

PS：注意在发布的时候，readme文件要提醒用户注入vuex和store，例如：

// main.js
import txDrawer from "tx-drawer";
// 你项目的store
import store from "./store";
/*
 txDrawer内部的store会注册到你的项目的store;
 txDrawer的store名为drawer,使用了命名空间
*/
Vue.use(txDrawer, { store });

这样我们组件内部的store才能正常使用。

打包发布

1、 npm run build
2、npm pack会生成.tgz包，npm install xxx.tgz即可安装到其他项目进行调试。
3、到npm官网注册账号： https://www.npmjs.com/
4、npm login登录个人账号
5、npm publish发布。记得把.tgz包删除，不然会连同tgz包一起发布。每次发布都要修改版本号，即package.json文件的"version": "0.0.1",

参考

demo：npm install tx-drawer
gitee：https://gitee.com/shiquan1442/tx-drawer/tree/master

从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件) - 进军的蜗牛 - 博客园 (cnblogs.com)