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

由于升级了 v0.2 版 GearCase 使用打包工具从 parcel 更换成 vue-cli 3.x。因此打包后发布 NPM 包的方式与之前有很大的差异，这也导致了在发布完 GearCase v0.2.2 版本之后，我自己在进行 NPM / Yarn 安装包时。根本无法通过之前文档的方式，进行引入并注册组件。后来我大概花费了两天的时间来解决这个问题。

回顾

由于 parcel 的打包方式与 webpack 有很大的差异。并且当时还处于轮子库 v0.1 版本，引入/注册组件的方式也有不同。

详情参照之前的博文Parcel 打包器简单使用记录

 

解决过程

打包方式

首先要解决是打包方式异同的问题。一开始我还是以前的思路，使用普通的 npm run build / yarn build 方式进行打包，完成之后生成了一系列文件。如下图结构。

可以查看到的是，JS 文件目录之下，有两个 JS 文件，通过之前的方式。我将这两个 JS 文件都放置到 dist目录之下，并取名为 index.js。然后在项目的 package.json 文件中添加 "main": "dist/index.js", 后再次使用 npm bulish 上传 NPM 包，仍旧无法按照之前文档所写方式(旧方式)正常引入/注册/使用我所构建的轮子组件。

随后在 vue cli 的官方文档中，我找到了打包库模式的方法。详细文档参考vue-cli 构建目标库方法

按照文档中的方法，依旧创建在 src 目录下创建入口文件 index.js。然后通过文档中的命令 "vue-cli-service build --target lib --name GearCase src/index.js" 进行库方式的打包，最后生成了四个文件。目录如下：

再查看 GearCase.umd.js 这个文件内容之后，发现这个 JS 文件就是我们所需要的（因为他是 umd 的统一模块定义方法，可以兼容所有的模块化方式），并且相对于之前的方式，这个 JS 文件可以使用于任意环境。

什么是 umd ?

commonJS、requireJS 都是用来处理JS模块化的，其中 commonJS 用来给 nodejs 使用（使用了 module.exports 的用法）。后来使用 import/export 来导出/引入模块。umd 是统一模块定义方法，可以兼容所有其他的模块定义方法。

 

重新导出

接下来我们把所有的组件导出，并用 ES6 的简介书写方式使用一行代码完成导入导出，如下图所示。

然后再使用 "vue-cli-service build --target lib --name GearCase src/index.js" 进行库方式打包，会发现生成的 umd.js 文件容量变大了。

一开始查看 umd.js 文件代码之后以为是打包过程中将 Vue 引入组件的缘故，继而导致了代码超过了 200k。于是思考排除 Vuejs 参与打包的方法。

 

解决代码体积

后来查看文档之后，发现文档中特意说明了。默认情况下，是不会让 Vue 参与打包的。

注意对 Vue 的依赖
在库模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载 Vue；否则就会回退到一个全局的 Vue 变量。

 

发布

更改 name

由于之前使用 GearCase，但大写的文件名可能导致一些问题，所以修改为 gearcase。

更改入口文件

将之前 package.json 的 "main": "dist/index.js", 入口文件修改为 "main": "dist/gearcase.umd.min.js",。

简化命令

在 package.json 中添加 script 快捷语法，将 "vue-cli-service build --target lib --name gearcase src/index.js" 命令简化为 package-go。

然后使用以下命令重新打包。并生成我们最终需要的文件

yarn package-go

 

注意这里的 gearcase 已经在新的版本中更换为了 gear-case

发布 NPM 包

使用 npm publish 发布 NPM 包到线上。

后续

经过以上操作。成功解决了 parcel 更换 vue-cli 3.x 之后打包生成文件上传到 NPM 无法引入的问题。

截止到该问题解决 GearCase 版本已经升级到 v0.2.14，新的文档正在更新中… 详细更改说明请查阅文档