您的位置:首页 > Web前端 > Vue.js

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
,新的文档正在更新中… 详细更改说明请查阅文档

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐