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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2020字，纯文字阅读大概需要3分钟。

内容图文

由于升级了 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，新的文档正在更新中… 详细更改说明请查阅文档

原文：https://www.cnblogs.com/evenyao/p/10208155.html

内容总结

以上是互联网集市为您收集整理的Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题全部内容，希望文章能够帮你解决Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1095454.html

来源：【匿名】