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 ?

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,新的文档正在更新中… 细致变动申明请查阅文档

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。