基于vue-cli，将vue组件发布为npm包

1、使用 vue init 初始化项目

我用的是webpack-simple模板，目的是为了缩小包体。

vue init webpack-simple my-first-vue-npm

如果没有全局安装@vue/cli-init，还需要先安装@vue/cli-init

npm install -g @vue/cli-init
// or
yarn global add @vue/cli-init

安装完@vue/cli-init之后后，重新执行vue init，填写项目信息。因为我用习惯less，这里就不安装sass。

“无脑三连”启动项目，项目初始化完成。

cd my-first-vue-npm
npm install
npm run dev

2、创建 vue 组件

新建/src/component/index.vue跟/src/index.js两个文件

/src/component/index.vue：按普通 vue 组件编写即可

/src/index.js：将编写 vue 的 vue 组件导出

import MyFirstVueNpm from "./component";

export default MyFirstVueNpm;

修改app.vue，主要是用于dev环境调试，当然不改也是可以的。

3、修改 webpack.config.js

需要做三件事情：

1. 根据环境选择不同的入口文件以及设置输出文件名；
2. 设置打包格式为UMD，UMD模式是一种兼容模式，可同时以 AMD、CommonJS和globals形式输出，这里可以回顾一下UMD的模块定义：

(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["b"], factory);
  } else if (typeof module === "object" && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require("b"));
  } else {
    // Browser globals (root is window)
    root.returnExports = factory(root.b);
  }
})(this, function(b) {
  //use b in some fashion.

  // Just return a value to define the module export.
  // This example returns an object, but the module
  // can return a function as the exported value.
  return {};
});

1. 剔除通用包，比如我写的是vue 组件，那么引用之前就必须引入vue.js，所以我们可以在externals属性里面剔除vue。

var entry = "./src/main.js";
var filename = "build.js";

if (process.env.NODE_ENV !== "development") {
  entry = "./src/index.js";
  filename = "my-first-vue-npm.min.js";
}

module.exports = {
  entry,
    output: {
        path: path.resolve(__dirname, "./dist"),
        publicPath: "/dist/",
        filename,
        libraryTarget: "umd",
        umdNamedDefine: true // 给 AMD 模块命名，否则匿名
    },
    externals: {
        vue: "vue"
    },
    ...
}

4、修改 package.json

1. 为package.json添加属性main，main属性指定了程序的主入口文件，可以引用的时候简化，例如原本需要require("my-first-vue-npm/dist/my-first-vue-npm.min.js")，现在只需要写成require("my-first-vue-npm")；
2. 将private设置为 false，否则发布npm会失败。

"main": "dist/my-first-vue-npm.min.js",
"private": false,

5、发布到 npm

1. 先打包npm run build一下；
2. 创建/.npmignore文件，忽略源文件以及配置文件等：

.*
/node_modules
/src
package-lock.json
webpack.config.js
index.html

1. 到npm创建一个账号；
2. 需要查询包名是否已存在，发布到npm：

// 如果之前设置过淘宝镜像，则需要设置回来
npm config set registry https://registry.npmjs.org/
// 登录npm，然后输入账号密码
npm login    
// 发布包，每次发布都需要更改package.json里的version     
npm publish         
// 删除包
npm unpublish       

至此将vue组件发布到npm就完成了，下面是如何调用，当然只是列举了其中一种。

6、调用

7、示例

最后提一下我最近发的npm包，这是一个基于Vue.js设置移动端h5显示方向（横屏或者竖屏）的vue组件，有兴趣可以了解下https://www.npmjs.com/package/vue-orient。

参考文章

https://www.cnblogs.com/tzyy/p/5193811.html
https://www.cnblogs.com/heyushuo/p/10177795.html
https://www.cnblogs.com/suoni/p/11717922.html