使用rollup | vue cli3(Webpack) 搭建属于自己的组件库,(按需加载,多入口打包...)

2019-09-11 admin

项目说明

项目github地址 最近准备抽离一些组件,所以就动手搭建了一个基础打包项目,该有的功能基本都有,功能如下:

按需引入:

支持使用babel-plugin-import插件按需引入,同时项目也支持多入口打包,可以单独引入某个入口打包文件,达到按需引入的目的.

多种方式打包:

支持rollupvue cli3两种方式打包成库文件,rollup支持多种格式打包,只需要执行不同的npm命令即可

组件测试及demo文档

保留vue cli3当做example示例启动架子,支持vuepress文档,采用类是element-ui文档风格的组件展示.使用jest当做项目测试工具

其他一些配置

内置了eslint,styleline,commitlint,prettier,conventional等多个插件来规范代码,保证代码质量

项目目录:

如何创建属于组件库或者依赖库

第一步 获取代码

拉取项目代码 https://github.com/anncwb/lib…到本地 一些目录说明

.
├── build
│   ├── cli.build.js // vue cli3打包配置
│   ├── rollup.build.js // rollup打包配置
│   ├── rollup.createConfig.js 
│   └── utils.js 
├── config
│   └── rollup.build.config.js // rollup打包类型配置
├── docs // 开发文档
├── examples // 开发示例
├── lib // 打包后的文件
│   └── theme 打包后的css文件
├── packages // 子模块
├── src 
│   ├── index.js  // 主入口
│   └── lib-list.js // 模块打包配置
├── tests // 测试文件
├── types // 类型定义文件

第二步 编写组件

在package下面新建组件或者js库,这里使用的是vue来做测试例子,组件编写需要提供js文件如下index.js

编写统一的入口文件

在src下面创建index.js文件,将所有组件引入,并导出

开始打包

打包前需要自己编写一个打包入口文件,用于多入口打包,没做成自动获取,自己动手写把, 在 src下面新建 lib-list.js文件,文件名必须一致且不能使用es6语法导出 lib-list.js:

module.exports = {
  index: {
    input: 'src/index.js',
    output: 'index'
  },
  'file-handle': {
    input: 'packages/file-handle/index.js',
    output: 'file-handle'
  },
  'test-module': {
    input: 'packages/test-module/index.js',
    output: 'test-module'
  }
}

lib-list.js说明

input: 你需要打包的入口,这里需要使用js,所以package的组件必须提供js入口文件

output: 打包后的组件名,打包后会在lib目录下生成对应的文件

打包

rollup打包

如果项目偏向于库文件, 建议使用rollup打包

执行npm run lib即可,

使用vue cli3(webpack)打包

如果项目偏向于UI库,包含比较多的静态文件, 建议使用这种方式打包 执行npm run lib:cli即可

完成后会显示打包成功字样就可以了,同时会生成lib目录,就是你到包后的文件,

同时两种打包方式,默认输出的lib文件名会一模一样,方便切换,当然,你也可以自行更改

发布到npm

这里就不再说如何发布到npm了,大家自行百度,注意将package.json的main指向lib/index.js即可

如何实现按需加载

方式一

使用 babel-plugin-import实现按需加载

  1. 在项目中引入你自己发布到npm上面的库
yarn add xxx 
我这里是
yarn add vue-lib-starter 
  1. 安装 babel-plugin-import
yarn add  babel-plugin-import -D
  1. 配置babel.config.js
module.exports = {
  ....
  plugins:[
    [  'import',
      {
      // 组件库的名字,可以根据你发布的库的package.json的name自行更改
        libraryName: 'vue-lib-starter',

        // 默认打包是lib,不用更改
        libraryDirectory: 'lib',

        // 如果有样式文件,因为打包后样式统一放在/lib/theme下,所以需要稍微转换下
        style: (name, file) => {
          const libDirIndex = name.lastIndexOf('/')
          const libDir = name.substring(0, libDirIndex)
          const fileName = name.substr(libDirIndex + 1)
          return `${libDir}/theme/${fileName}.css`;
        }
      }
    ]
  ]
}
  1. 结果(亲测有效,可以自行测试)
import { TestModule } from 'vue-lib-starter'
会转化成下面:

js:
import TestModule from 'vue-lib-starter/lib/test-module.js'

css:
import 'vue-lib-starter/lib/theme/test-module.css'

方式二

手动按需引入,打包后出了统一的入口文件,还可以自己打包多个入口,如果有配置,可以直接引入自己需要的组件:

import TestModule from 'vue-lib-starter/lib/test-module.js'
import 'vue-lib-starter/lib/theme/test-module.css'

这样即可完成按需引入,两种方式其实最终效果都一样

文档编写

集成了vuepress作为文档编写工具,具体使用请参考官方文档

一些注意点

  • 项目的eslintstylelint规则可能跟你的项目,需要自行修改
  • 项目默认会对git提交的message进行校验,请确保你的message个是符合commitline规则,具体可以查看根目录下commitlint.config.js
  • src下面的lib-list.js必须有,否则会出错
  • npm run lint:prettier 执行会格式化全部js和ts文件,谨慎这行
  • npm run lint:css 执行可能会报错,因为项目的目录下没有css文件
  • npm run version 生成变更日志的前提是你要符合上面的commitlint.config.js提交规范

最后

更多的细节可以自行拉取代码查看

由于是时间比较少,就一天左右的时间弄出来的,有些东西可能没考虑全,大家可以自己根据自己的需求修改代码,仅提供我的代码参考而已

[转载]原文链接:https://segmentfault.com/a/1190000020358636

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74871.html

文章标题:使用rollup | vue cli3(Webpack) 搭建属于自己的组件库,(按需加载,多入口打包...)

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
回到顶部