使用rollup-vue-cli3Webpack-搭建属于自己的组件库按需加载多入口打包

项目说明

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

按需引入:

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

多种方式打包:

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

组件测试及 demo 文档

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

其他一些配置

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

项目 github 地址

项目目录:

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

第一步 获取代码

拉取项目代码 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 提交规范

最后

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

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