vue-cli打包lib分析

参考vue-cli lib配置

使用如下方式打包组件库

vue-cli-service build --target lib --name myLib [entry]

打包产物如下：

• dist/myLib.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)
• dist/myLib.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包
• dist/myLib.umd.min.js：压缩后的 UMD 构建版本
• dist/myLib.css：提取出来的 CSS 文件 (可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)

以umd.js包为例分析：

demo源码

产物分析

vue对象

使用script方式引umd.js文件，会在全局插入包中的vue对象

其实就是正常注册组件时，手动创建的vue对象。这个对象也可以直接注册并使用。

css

默认的css文件会被单独打包，并且需要单独引入

可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联)

第三方依赖

默认除了Vue的第三方依赖也是会被引入的。

可以使用external配置进行处理

详情可以查看：webpack external

configureWebpack: (config) => {
      config.externals = {
        "lodash": "lodash",
      };
  }

默认externalsType的值是var,也就是从全局引入

只需要在组件注册之前，确保第三方依赖被挂载在window上，组件中就可以正常使用