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

项目说明

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

按需引入:

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

多种方式打包:

支持 rollup和 vue 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做为文档编写工具,具体使用请参考官方文档

一些注意点

• 项目的eslint和stylelint规则可能跟你的项目,须要自行修改
• 项目默认会对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提交规范

最后

更多的细节能够自行拉取代码查看

因为是时间比较少,就一天左右的时间弄出来的,有些东西可能没考虑全,你们能够本身根据本身的需求修改代码,仅提供个人代码参考而已