项目说明
项目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实现按需加载
- 在项目中引入你自己发布到npm上面的库
yarn add xxx
我这里是
yarn add vue-lib-starter - 安装 babel-plugin-import
yarn add babel-plugin-import -D- 配置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`;
}
}
]
]
}- 结果(亲测有效,可以自行测试)
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提交规范
最后
更多的细节可以自行拉取代码查看
由于是时间比较少,就一天左右的时间弄出来的,有些东西可能没考虑全,大家可以自己根据自己的需求修改代码,仅提供我的代码参考而已
