zoukankan      html  css  js  c++  java
  • 利用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

      预览地址

      源码地址

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

  • 相关阅读:
    不可错过的几款GitHub开源项目
    Android OTG之USB转串口模块通讯
    Multiple dex files define Lokhttp3/internal/wsWebSocketProtocol
    npm install安装依赖包失败
    Jquery 添加删除属性、添加删除class、添加删除Css(转载)
    jquery 获取一个元素的坐标位置
    Axure9 最新版的授权码(转)
    js实现上移 下移 置顶 置底操作
    iframe子页面获取父页面元素和window对象
    window.onresize与$(window).resize()的用法
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12383353.html
Copyright © 2011-2022 走看看