Go语言视频零基础入门到精通

admin

由于升级了

1. v0.2

复制代码

版

1. GearCase

复制代码

使用打包工具从

1. parcel

复制代码

更换成

1. vue-cli 3.x

复制代码

。因此打包后发布

1. NPM

复制代码

包的方式与之前有很大的差异，这也导致了在发布完

1. GearCase v0.2.2

复制代码

版本之后，我自己在进行

1. NPM / Yarn

复制代码

安装包时。根本无法通过之前文档的方式，进行引入并注册组件。后来我大概花费了两天的时间来解决这个问题。


回顾
由于

1. parcel

复制代码

的打包方式与

1. webpack

复制代码

有很大的差异。并且当时还处于轮子库

1. v0.1

复制代码

版本，引入/注册组件的方式也有不同。
详情参照之前的博文Parcel 打包器简单使用记录
  
解决过程
打包方式
首先要解决是打包方式异同的问题。一开始我还是以前的思路，使用普通的

1. npm run build / yarn build

复制代码

方式进行打包，完成之后生成了一系列文件。如下图结构。

可以查看到的是，

1. JS

复制代码

文件目录之下，有两个

1. JS

复制代码

文件，通过之前的方式。我将这两个

1. JS

复制代码

文件都放置到

1. dist

复制代码

目录之下，并取名为

1. index.js

复制代码

。然后在项目的

1. package.json

复制代码

文件中添加

1. "main": "dist/index.js",

复制代码

后再次使用

1. npm bulish

复制代码

上传

1. NPM

复制代码

包，仍旧无法按照之前文档所写方式(旧方式)正常引入/注册/使用我所构建的轮子组件。
随后在

1. vue cli

复制代码

的官方文档中，我找到了打包库模式的方法。详细文档参考vue-cli 构建目标库方法



按照文档中的方法，依旧创建在

1. src

复制代码

目录下创建入口文件

1. index.js

复制代码

。然后通过文档中的命令

1. "vue-cli-service build --target lib --name GearCase src/index.js"

复制代码

进行库方式的打包，最后生成了四个文件。目录如下：

再查看

1. GearCase.umd.js

复制代码

这个文件内容之后，发现这个

1. JS

复制代码

文件就是我们所需要的（因为他是

1. umd

复制代码

的统一模块定义方法，可以兼容所有的模块化方式），并且相对于之前的方式，这个

1. JS

复制代码

文件可以使用于任意环境。

什么是 umd ?

1. commonJS

复制代码

、

1. requireJS

复制代码

都是用来处理JS模块化的，其中

1. commonJS

复制代码

用来给

1. nodejs

复制代码

使用（使用了

1. module.exports

复制代码

的用法）。后来使用

1. import/export

复制代码

来导出/引入模块。

1. umd

复制代码

是统一模块定义方法，可以兼容所有其他的模块定义方法。

  
重新导出
接下来我们把所有的组件导出，并用

1. ES6

复制代码

的简介书写方式使用一行代码完成导入导出，如下图所示。

然后再使用

1. "vue-cli-service build --target lib --name GearCase src/index.js"

复制代码

进行库方式打包，会发现生成的

1. umd.js

复制代码

文件容量变大了。

一开始查看

1. umd.js

复制代码

文件代码之后以为是打包过程中将

1. Vue

复制代码

引入组件的缘故，继而导致了代码超过了 200k。于是思考排除

1. Vuejs

复制代码

参与打包的方法。
  
解决代码体积
后来查看文档之后，发现文档中特意说明了。默认情况下，是不会让

1. Vue

复制代码

参与打包的。

注意对 vue 的依赖
在库模式中，

1. Vue

复制代码

是外置的。这意味着包中不会有

1. Vue

复制代码

，即便你在代码中导入了

1. Vue

复制代码

。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载

1. Vue

复制代码

；否则就会回退到一个全局的

1. Vue

复制代码

变量。

  
发布
更改 name
由于之前使用

1. GearCase

复制代码

，但大写的文件名可能导致一些问题，所以修改为

1. gearcase

复制代码

。
更改入口文件
将之前

1. package.json

复制代码

的

1. "main": "dist/index.js",

复制代码

入口文件修改为

1. "main": "dist/gearcase.umd.min.js",

复制代码

。
简化命令
在

1. package.json

复制代码

中添加

1. script

复制代码

快捷语法，将

1. "vue-cli-service build --target lib --name gearcase src/index.js"

复制代码

命令简化为

1. package-go

复制代码

。
然后使用以下命令重新打包。并生成我们最终需要的文件

1. yarn package-go

复制代码

  

注意这里的

1. gearcase

复制代码

已经在新的版本中更换为了

1. gear-case

复制代码

发布 NPM 包
使用

1. npm publish

复制代码

发布

1. NPM

复制代码

包到线上。


后续
经过以上操作。成功解决了

1. parcel

复制代码

更换

1. vue-cli 3.x

复制代码

之后打包生成文件上传到

1. NPM

复制代码

无法引入的问题。
截止到该问题解决

1. GearCase

复制代码

版本已经升级到

1. v0.2.14

复制代码

，新的文档正在更新中… 详细更改说明请查阅文档