由于升级了 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 ?

commonJSrequireJS 都是用来处理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 包发布的问题的更多相关文章

  1. 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题

    本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...

  2. lib库依赖解决

    当前环境之前是装过MySQL官方版本5.6.22,想测试Percona版本MySQL.启动Percona-MySQL报错. [root@dg7 support-files]# /etc/init.d/ ...

  3. VS2015调用低版本lib库出现“无法解析的外部符号 __snprintf ”问题的解决

    VS2015在调用低版本lib库出现有时会出现“无法解析的外部符号 __snprintf ”的问题,解决方法是加入lib库“legacy_stdio_definitions.lib”到工程.

  4. vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目

    使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容 vue.config.js module.exports = { publicPath: './',//打包后的位置(如果不设置这 ...

  5. Android so lib库远程http下载和动态注册

    一.背景 在开发Android应用程序的实现,有时候需要引入第三方so lib库,但第三方so库比较大,例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过 ...

  6. lib库dll库的使用方法与关系

    一.lib库 lib库有两种:一种是静态lib(static Lib),也就是最常见的lib库,在编译时直接将代码加入程序当中.静态lib中,一个lib文件实际上是任意个obj文件的集合,obj文件是 ...

  7. uafxcwd.lib(afxmem.obj) : error LNK2005 解决方法

    项目为非MFC,但要用到MFC的库,使用过程中遇到的问题总结一下 uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl opera ...

  8. VS2010中添加lib库引用

    VS2010中添加lib库引用: 1 菜单  项目---> 属性--->配置属性-->链接器---->输入---附加依赖项,  加入库名,如: my_API.lib; 或是在c ...

  9. .h头文件 .lib库文件 .dll动态库文件之间的关系

    .h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的. 附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够 ...

随机推荐

  1. python第十四课--排序及自定义函数之案例一:选择排序

    案例一:选择排序使用选择排序的思想实现列表数据的升序排序 lt=[45,12,56,-32,-3,44,75,-22,100] length=len(lt) # print('排序前:'+str(lt ...

  2. [USACO09MAR]Moon Mooing

    嘟嘟嘟 某谷的翻译挺迷的,简单来说就是给一个初值c,然后有两个函数f1 = a1 * x / d1 + b1, f2 = a2 * x / d2 + b2.把c分别带进去,所得的结果也递归带进去,这样 ...

  3. [HNOI2005]汤姆的游戏

    嘟嘟嘟 直接O(n ^ 2)暴力判断就行了. 对于圆,判断该点和圆心的距离是否小于半径. 然而为啥我这么写编译不过: scanf("%lf%lf%lf%lf", &a[++ ...

  4. python+requests实现接口测试 - cookies的使用

    在很多时候,发送请求后,服务端会对发送请求方进行身份识别,如果请求中缺少识别信息或存在错误的识别信息, 会造成识别失败. 如一些需要用户登录以后才能访问的页面. import requests mya ...

  5. P1446 [HNOI2008]Cards

    题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...

  6. 关于NSStringFromClass的一点见解

    今天做项目的时候遇到一个需求,就是子view视图弹出时,屏蔽掉父view的所有手势,然后想到用 UIGestureRecognizerDelegate代理方法,中间省一些文字(无奈脸),言归正传,NS ...

  7. 与数论的爱恨情仇--01:判断大素数的Miller-Rabin

    在我们需要判断一个数是否是素数的时候,最容易想到的就是那个熟悉的O(√n)的算法.那个算法非常的简单易懂,但如果我们仔细想想,当n这个数字很大的时候,这个算法其实是不够用的,时间复杂度会相对比较高. ...

  8. 逻辑卷管理-LVM(Logical Volume Manager)

    一. 概念与由来 LVM:逻辑卷管理(Logical Volume Manager) 普通的磁盘分区管理方式在逻辑分区划分好之后就无法改变其大小,当一个逻辑分区存放不下某文件时,这个文件因为受上层文件 ...

  9. 第一次作业:基于Linux 4.5的进程模型与调度器分析

    1.操作系统是怎么组织进程的? 1.1什么是线程,什么是进程: 刚接触时可能经常会将这两个东西搞混.简单一点的说,进程是一个大工程,线程则是这个大工程中每个小地方需要做的东西(在linux下看作&qu ...

  10. SceneKit下关于修改SCNNode 的Shader展示自定义图形

    由于某些需求,需要在苹果OS x系统下展示一组点云,准备使用苹果官方的三维显示控件来完成这一功能.场景点云作为离散的点, 如果每个点以SCNnode的形式加入场景中,则回造成过大的内存消耗,笔者电脑下 ...