基于vueCli2发布一个vue组件的npm包

这篇文章主要记录了从零发布一个vue的npm包（包含一个简单的指令和一个vue组件）的实践过程及些许心得。

初始化项目

这里我们通过@vue/cli拉取简单配置的模板来初始化一个2.X的项目，不了解的同学可以看下vueCli3官方文档

vue init webpack-simple vue-directive-kit

初始化的项目目录如下

├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   └── main.js
└── webpack.config.js

接下来做一些改动。src目录改为examples用于本地开发及案例展示，新增一个packages目录用于存放组件源码及导出文件。

├── README.md
├── examples
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── packages
│   ├── componentName // 单个组件
│   │   ├── index.js
│   │   └── src
│   │       └── componentName.vue
│   └── index.js  // 导出文件
└── webpack.config.js

由于文件名称做了改动，webpack的打包配置也要做对应修改。默认webpack.config.js会导出一个对象，这里我们改为导出一个函数，然后由函数把配置对象导出，这样可以接受一个通过package.json传过来的参数env,同时修改entry及output：

module.exports = env => {
   
    return {
   
        entry: env.lib ? "./packages/index.js" : "./examples/main.js",
        output: {
   
            // 打包文件的生成路径
            path: path.resolve(__dirname, env.lib ? "./lib" : "./dist"),
            publicPath: env.lib ? "/lib/" : "/dist/",
            // 打包后生成的文件名
            filename: env.lib ? "vue-directive-kit.js" : "build.js",
            /**
             * library指定的就是你使用require时引入的模块名
             * 这里便是require(“vue-directive-kit”)
             */
            library: env.lib ? "vue-directive-kit" : "",
            /**
             * libraryTarget可以指定打包文件中代码的模块化方式，默认为var，常见有如下几种:
             * commonjs/commonjs2: 将你的library暴露为CommonJS模块
             * amd: 将你的library暴露为amd模块
             * umd: 将你的library暴露为所有的模块定义下都可运行的方式
             * 其中AMD和UMD需要指定library，如果不声明组件库则不能正常运行,
             * 这是为了在浏览器上通过script标签加载时，用AMD模块方式输出的组件库可以有明确的模块名
             */
            libraryTarget: env.lib ? "umd" : "var",
            /**
             * 当使用了 libraryTarget: "umd"，
             * 设置umNamedDefine为true时，
             * 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
             */
            umdNamedDefine: env.lib ? true : false,
        },
    };
};

上面的配置可以知道，我们需要通过env来控制打包类型。