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
,新的文档正在更新中… 详细更改说明请查阅文档
Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题的更多相关文章
- 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题
本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...
- lib库依赖解决
当前环境之前是装过MySQL官方版本5.6.22,想测试Percona版本MySQL.启动Percona-MySQL报错. [root@dg7 support-files]# /etc/init.d/ ...
- VS2015调用低版本lib库出现“无法解析的外部符号 __snprintf ”问题的解决
VS2015在调用低版本lib库出现有时会出现“无法解析的外部符号 __snprintf ”的问题,解决方法是加入lib库“legacy_stdio_definitions.lib”到工程.
- vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...
- Android so lib库远程http下载和动态注册
一.背景 在开发Android应用程序的实现,有时候需要引入第三方so lib库,但第三方so库比较大,例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过 ...
- lib库dll库的使用方法与关系
一.lib库 lib库有两种:一种是静态lib(static Lib),也就是最常见的lib库,在编译时直接将代码加入程序当中.静态lib中,一个lib文件实际上是任意个obj文件的集合,obj文件是 ...
- uafxcwd.lib(afxmem.obj) : error LNK2005 解决方法
项目为非MFC,但要用到MFC的库,使用过程中遇到的问题总结一下 uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl opera ...
- VS2010中添加lib库引用
VS2010中添加lib库引用: 1 菜单 项目---> 属性--->配置属性-->链接器---->输入---附加依赖项, 加入库名,如: my_API.lib; 或是在c ...
- .h头文件 .lib库文件 .dll动态库文件之间的关系
.h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的. 附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够 ...
随机推荐
- 「GXOI / GZOI2019」与或和
题目 广西和贵州的省选?好像很神仙的样子啊 之后发现这是一道水题 我们显然应该拆位考虑 显然我们应该对于每一位都拆一下看看这一位是\(0/1\) 显然我们如果找到一个全是\(1\)的矩阵,那么这一位的 ...
- ubuntu16.04常见的问题解决方案
问题一:关于咖啡主机和其他服务器厂商和个人虚拟机VM10安装ubuntu16.04 ubuntu16.04默认是没有root用户的,要想有必须要通过用户创建,通常安装ubuntu16.04会有个让你创 ...
- Kafka设计解析(十五)Kafka controller重设计
转载自 huxihx,原文链接 Kafka controller重设计 目录 一.Controller是做什么的 二.Controller当前设计 三.Controller组成 四.Controlle ...
- CentOS中用Nexus搭建maven私服,为Hadoop编译提供本地镜像
系统: CentOS release 6.6 (Final) Nexus:nexus-2.8.1-bundle.tar.gz,下载地址:https://sonatype-download.global ...
- DML-插入
插入的方式一: 语法: insert into 表名(字段)values(值); 特点: 1.要求表明括号里的属性和values括号里的属性一致或兼容 2.字段的个数和顺序不一定与原始表中的字段个数和 ...
- Yii2 查询条件
Model::find() 字符串格式,例如:'status=1' 哈希格式,例如: ['status' => 1, 'type' => 2] 操作符格式,例如:['like', 'nam ...
- lua io操作(一)
最近在做可视化窗口数据配置 使用的lua 语言,免不了IO操作 通过查阅资料,做了如下总结,易于理解 lua里的文件读写模型来自C语言,分为完整模型(和C一样).简单模型. 1.简单模型 io.inp ...
- 20155237 2016-2017-2 《Java程序设计》第2周学习总结
教材学习内容总结 通过教材了解了JAVA可区分为基本类型和类类型(参考类型)两大类型系统. 基本类型 分类 整数 short(2) / int(4) / long(8) 字节 byte(-128-12 ...
- python基础学习1-三元表达式和lambda表达式
#!/usr/bin/env python # -*- coding:utf-8 -*- 三元运算 if else 的简写 name ="alex" if 1==1 else &q ...
- c++ 分配与释放内存
教学内容: calloc分配内存 calloc与malloc的区别 memset函数初始化内存 free释放动态分配的内存 一.calloc函数分配内存 void *calloc( size_t nu ...