打包一个 vue 组件库

发表于 | 分类于 |

开发 Vue 过程打包一个组件库的亲身经历，特记录在此，以备后用。

初次尝试

打包一个 vue 组件库 (@vue/cli-server)

安装 vue-cli-server

1
 yarn global add @vue/cli-service

构建 lib

1
vue-cli-service build --target lib --name myLib xxxComponent.vue

报错

1
2
3
4
5
6
7
8
9
10
11
12
13
⠋  Building for production as library (commonjs,umd,umd-min)... ERROR  Error: Cannot find module 'vue-template-compiler/package.json'
Error: Cannot find module 'vue-template-compiler/package.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at api.chainWebpack.webpackConfig (/Users/owenliu/.config/yarn/global/node_modules/@vue/cli-service/lib/config/base.js:73:32)
    at webpackChainFns.forEach.fn (/Users/owenliu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:225:40)
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/Users/owenliu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:225:26)
    at PluginAPI.resolveChainableWebpackConfig (/Users/owenliu/.config/yarn/global/node_modules/@vue/cli-service/lib/PluginAPI.js:128:25)
    at genConfig (/Users/owenliu/.config/yarn/global/node_modules/@vue/cli-service/lib/commands/build/resolveLibConfig.js:29:24)

安装 vue-template-compiler

1
yarn global add vue-template-compiler

再次构建 lib，依然报错

1
2
3
Failed to resolve loader: cache-loader
You may need to install it.
 ERROR  Build failed with errors.

安装 cache-loader

1
yarn global add cache-loader

⚠️⚠️⚠️，以上操作，全部作废，没有用。。。。

二次尝试

由于公共部分和原有的其他私有组件放在了一个 vue 项目里面，所以说，没有办法通过命令单独把这个组件打包成 lib 的， 最后确定实现方案为拆分回答和编辑

打包方式

引用方式

首先我们编辑入口文件 src/index.js, 使其被作为 UI 库导入时能自动在 Vue 中注册我们的 Component:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import HelloWorld from './HelloWorld'
const Components = {
  HelloWorld
}

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name])
})

export default Components

最终解决方案

参考 vue-cli 官方文档

由于我之前使用 vue-cli 脚手架创建 dashboard 项目时候使用的是旧版的创建方式，所以不能使用 vue-cli-service

1
vue init webpack project_name

使用这种方式创建项目的目录结构是这样的：

image-20190304132801452

现在 vue-cli 3.x 的方法是：

1
vue create -d project_name

创建后项目目录结构是：

image-20190304133049717

配置方式参考

2.x 的 webpack 模版方式创建的项目会有单独的文件夹存储配置信息，3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到 CLI service 去了，从而所有的配置文件在初始化的项目中并没有生成。

最后构建 lib

1
yarn build --target lib --name myLib [entry]

入口 entry 可选，可以指定一个 .js 或者 .vue, 若不指定入口，默认为 src/App.vue

image-20190304134559697

  • 测试还未发布的包 *
1
yarn add file:/Users/owenliu/lehui/myLib/

执行完 yarn add 之后，使用此 lib 的项目的 package.json 的内容： 2019-04-10-17-22-23

更改配置 2019-04-10-17-19-10

构建告警 文件大小超出限制

1
2
3
4
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  answer.common.js (482 KiB)

方式一  vue.config.js 的 configureWebpack 字段中添加如下配置

1
2
3
4
5
6
7
module.exports = {
  configureWebpack: {
    performance: {
      hints: false
    }
  }
}

方式二 vue.config.js 的 configureWebpack 字段中添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  configureWebpack: {
    performance: {
      hints: "warning", // 枚举
      maxAssetSize: 30000000, // 整数类型（以字节为单位）
      maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
      assetFilter: function(assetFilename) {
        // 提供资源文件名的断言函数
        return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

      }
    }
  }
}

WebPack 警告WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).解决

最近在使用新版vue的命令行工具创建项目时，安装chromedriver老是失败，导致后面的步骤也没有进行。网上搜索了一下，全是使用

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 安装的，由于@vue/cli安装chromedriver失败，文件目录结构都不完整，所以必须一步成功，不能后面再装chromedriver。 看了一下chromedriver包的源码，程序判断了一下npm有没有设置过npm_config_chromedriver_cdnurl，如果设置过，就从配置的源安装。

设置 npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 设置 yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver" 这样就可以使用 @vue/cli 成功搭建项目了。

参考文章：

[[NPM package.json属性详解](https://www.cnblogs.com/tzyy/p/5193811.html)](https://www.cnblogs.com/tzyy/p/5193811.html)

VueCli 构建目标

Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问

vue-cli 3.x配置跨域代理

vue-cli Github

WebPack 警告WARNING in asset size limit

解决@vue/cli 创建项目是安装chromedriver时失败的问题