• 利用webpack打包自己的第一个Vue组件库


    先说一下这篇文章的诞生原因。我们有一个这样的项目,类似或者说就是一个仪表板-Dashboard,其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局(大小和位置)和展示的能力。要实现这样一个功能,想了好几种方式实现(后面的笔记详说),最后选择了这篇笔记的实现方式:写整个项目的,算是使用方;写每个组件的,算是vue类库(UI、组件库)的提供方。之后就是我们如何使用这些类库的问题了,就像我们使用element-ui一样,这样说就明白了吧!这里不说父子之间如何通信以及如何使用类库,只说如何打包类库。

      之前总是使用别人的类库了,没有自己写过,今天就着这个机会研究了有了一下,demo算是跑通了,深入的就需要之后慢慢学习了。

      开始还是看了一下element-ui是如何将所有的组件打包到一个JS文件,并且可以CDN方式使用的,发现和我们写一个单独的.vue单文件组件没有什么区别,主要是webpack的output和入口文件的写法有些不同,其他的都大同小异,先看一下output

     webpack.config.js

      这里主要说一下,libraryTarget、libraryExport、umdNamedDefine和globalObject

      1、libraryTarget:打包类库的发布格式,这里使用UMD,其他选项不解释(其实是……)

      2、libraryExport:这个选项同样不知道干什么的,但是我遇到了一个问题就是开始没有添加这个选项(虽然看了element-ui的打包,但是我给过滤了),导致使用的时候发现有双层的“default”,因为不是很了解,所以查了一些资料先看看,却发现和这篇文章说的一样:webpack组织模块打包Library的原理及实现,后来发现该文中使用的选项过期了,之后还是又看了一遍element-ui 才搞定,这一大圈

      3、umdNamedDefine:这个还是同上,但是添加和不添加这个选项比较一下生成文件你就知道了

      4、globalObject:这个是真不知道了,但是在stackoverflow中无意发现说这是个Bug,地址:https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target

      现在看来webpack配置文件处理output某些属性和我们正常开发没有什么区别,下面看一下他的入口文件:

     index.js

      入口文件就不解释了,在里面我觉得解释的够清楚了,还有类库中包含的组件这里就不说了,也没有什么好说的就是“Hello World”。

      最后在附上使用类库的代码:

     View Code

      预览地址

      源码地址

      这篇文章就到这里吧!有写的不对的地方,敬请指正,非常感谢!

  • 相关阅读:
    MySQL详细安装(windows)
    深入理解java虚拟机
    java语言实现机制
    java基本类型的长度
    关于SQLite数据库 字段 DateTime 类型
    "初识".Net Winfom
    Linux Shell脚本编程while语句
    mysql主从搭建
    oracle dg状态检查及相关命令
    Oracle 11.2.0.4单实例打补丁
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12383353.html
Copyright © 2020-2023  润新知