由于升级了 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，新的文档正在更新中… 详细更改说明请查阅文档
- 还没有人评论，欢迎说说您的想法！
客服
