Vuejs 使用 lib 库模式打包 umd 解决 NPM 包发布的问题
2019-01-02 13:52
1811 查看
由于升级了
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,新的文档正在更新中… 详细更改说明请查阅文档
相关文章推荐
- 使用正式签名打包APK,打开debug模式报错的问题解决方法
- 解决Windows和Linux使用npm打包js和css文件不同的问题
- 设计模式学习1—使用单件模式解决对象重复申请问题
- 面向接口编程在Java web 三层架构的应用与使用工厂模式解决问题
- Unity3D引用dll打包发布的问题及解决
- 终于解决了ubuntu下gnome-terminal中使用vim时在Insert模式下功能键键映射的问题
- Unity3D引用dll打包发布的问题及解决
- benchmark pm2的cluster模式发布web app的性能与相关问题解决方法
- gson 使用以及打包apk发布的问题
- ActiveX控件打包发布,解决无证书的问题
- 使用libxml提示libxml/tree.h找不到的问题解决
- 解决android使用gson解析json字符串,并使用混淆编译方式打包apk遇到的问题
- 使用halcon解决工业相机外部触发模式下的超时问题
- 【Java EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】
- 使用状态模式解决简单的信号转换问题
- 使用观察者模式完美解决activity与fragment通信问题
- [问题大概解决了,应该就是单键模式使用不当产生的。明天找人来做一下压力测试]又一次斗胆发到了首页。期盼帮我检查下objDB类是否有问题
- 在决定使用ClickOnce发布你的软件前,应该知道的一些事情(一些常见问题解决方法)
- OGRE库编译和使用问题,重定义以及dxguid.lib 调试信息损坏,请重新编译 等各种问题解决
- eclipse中maven web工程打包成war(发布到tomcar)时lib中没有jar包的解决办法