粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

theme: channing-cyan highlight: vs2015

前言:

随着前端业务的不断扩大,也造了一些的***轮子***或者面向业务***二次封装的代码***用在各个项目当中,为了提升团队开发效率,稳定开发质量,开拓前端工程化,一个服务于业务的***业务组件库***必不可少~

要说明的是业务组件库和平时用的第三方组件库(如ant-design)定位是不一样的并不冲突,一张图画出来你就明白了:

业务组件库的雏形:

组件库展示链接: http://8.210.196.94:8082
ps:服务器略渣,请耐心等待~

这篇打造了组件库的打包框架,下一篇是介绍如何写一个高质量的组件
手摸手教你写大屏自适应容器组件

1.技术选型

技术	简述
Vue3	~
Typescript	~
Rollup	一个轻量简单的打包工具,Vue和react源码就是用这个工具打包的
Tailwindscss	一个原子性的css框架,简单,定制性强,快速开发样式 https://tailwindcss.com/docs

2.环境搭建

(1).创建一个文件夹并 npm init
(2).在***pageck.json***中写入

{
 "name": "test-bricks-teach",
 "version": "1.0.0",
 "description": "",
 "author": "peiyahui",
 "types": "dist/index.d.ts",
 "license": "ISC",
 "main": "dist/test-bricks-teach.umd.js",
 "module": "dist/test-bricks-teach.esm.js",
 "scripts": {
   "build": "npm run clean && npm run build:esm && npm run build:umd",
   "dev": "npm run clean && npm run dev:umd",
   "build:esm": "rollup  --config build/rollup.esm.config.js",
   "build:umd": "rollup --config build/rollup.umd.config.js",
   "clean": "rimraf ./dist"
 },
 "devDependencies": {
   "rollup": "^2.38.5",
   "rollup-plugin-vue": "6.0.0-beta.6",
   "rollup-plugin-typescript2": "^0.29.0",
   "@rollup/plugin-node-resolve": "^11.1.1",
   "@types/lodash-es": "^4.17.4",
   "@vue/compiler-sfc": "^3.0.0",
   "postcss-import": "^14.0.0",
   "rimraf": "^3.0.2"
 },
 "dependencies": {
   "rollup-plugin-postcss": "^4.0.0",
   "rollup-plugin-commonjs": "^10.1.0",
   "tailwindcss": "^1.9.0",
   "postcss": "^8.2.8",
   "lodash-es": "^4.17.20",
   "typescript": "~3.9.3",
   "vue": "^3.0.0"
 }
}

相信大家对package.json的配置再熟悉不过了(建议直接复制)
这main和module两个字段是打包后输出的两个文件,先写上去
version字段一定不要落下
写完后,执行***npm install***

3.编写Rollup的配置文件

与package.json平级创建一个build文件夹,分别创建三个文件
1.文件1:rollup.config.js

import vue from 'rollup-plugin-vue'

import typescript from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import {name} from '../package.json'
import commonjs from 'rollup-plugin-commonjs';
import postcssImport from 'postcss-import';
// 处理 apply 以及内置 mixin
import tailwindcss from 'tailwindcss'

const file = type => `dist/${name}.${type}.js`

const overrides = {
    compilerOptions: {declaration: true},
    exclude: ["tests/**/*.ts", "tests/**/*.tsx"]
}

export {name, file}
export default {
    input: 'src/index.ts',
    output: {
        name,
        file: file('esm'),
        format: 'es'
    },
    plugins: [
        nodeResolve(),

        typescript({tsconfigOverride: overrides}),
        vue(),
        postcss({
            extensions: [".css"],
            extract: true,
            plugins: [postcssImport(), tailwindcss()]
        }),
        commonjs({
            include: [
                "node_modules/**",
                "node_modules/**/*"
            ]
        }),
    ],
    external: ['vue', 'echarts', 'lodash-es']
}

2.文件2:rollup.ems.config.js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name,
    file: file('esm'),
    format: 'es'
  }
}

3.文件3:rollup.umd.config.js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name: 'well-bricks',
    file: file('umd'),
    format: 'umd',
    globals: {
      'vue': 'Vue',
    },
    exports: 'named'
  }
}

到这里我们就把Rollup打包工具的配置弄好了
文件1 : 引入插件,设置输入与输入文件名称与位置
文件2和文件3只是复用了***文件1***配置字段,并覆盖了输出格式

4.创建组件

(1).创建/src/components/testBricks文件夹,并在testBricks文件夹下面创建index.ts和index.vue
(2).创建/src/index.ts
(3).创建/src/main.css
此时你的目录结构应该是这样的:

5.全局注册与局部注册组件

类似于ant-design和elementUI这样优秀的组件库,都提供了全局引入和局部引入:
~全局引入是利用了vue的install语法,循环组件都挂载到vue的实例对象上
~局部引入是利用了export的特性
在/src/index.ts 写入:

/* eslint-disable */
import {App} from 'vue'

import './main.css'   // 引入样式
import TestBricks from './components/testBricks'

const components = [
    TestBricks
]

// 全局注册
const install = (app: App) => {
    components.forEach(component => {
        app.component(component.name, component)
    })
}

// 局部注册
export {
    TestBricks,
    install
}
export default {
    install
}

ps:到这里其实你就已经打造好了一个组件库框架,接下来我们对具体的组件进行开发

6.组件加入tailwindcss

其实在rollup配置的时候就已经配置了处理tailwindcss功能,我们加入tailwind样式就可以
(1).在/src/main.css引入tailwindcss内置样式

[@import](/user/import) "tailwindcss/base";

[@import](/user/import) "tailwindcss/components";

[@import](/user/import) "tailwindcss/utilities";

ps:这里其实还有个[黑魔法]

你甚至可以在组件库编写tailwinds的样式(下面举例[.btn]属性为例),打包发布后在项目中直接使用该样式

// main.css

[@import](/user/import) "tailwindcss/base";

[@import](/user/import) "tailwindcss/components";

[@import](/user/import) "tailwindcss/utilities";

.btn {
    @apply bg-blue-500 text-white;
}

举例项目中使用: \

<button class="btn"></button>

(2).在 /src/components/testBricks/index.vue


<template>
 <section class="text-gray-600 body-font">
   <div class="container px-5 py-24 mx-auto">
     <div class="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
       <div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
         <h2 class="text-gray-900 text-lg title-font font-medium mb-2">123</h2>
         <p class="leading-relaxed text-base">333</p>
       </div>
     </div>
   </div>
 </section>
</template>
<script lang="ts">
import {defineComponent} from 'vue'

// array that contains style props
export default defineComponent({
 name: 'testBricks',
 props: {},
})
</script>

<style scoped>

</style>

ps:这里是写的tailwindscss的样式,没有任何逻辑

(3)./src/components/testBricks/index.ts中写入

import { App } from 'vue'
import IndexFeature from './index.vue'
IndexFeature.install = (app: App) => {
  app.component(IndexFeature.name, IndexFeature)
}

export default IndexFeature

ps:到这里我们的组件库就打造好了~
接下来我们就要打包,发布

7.关于打包

npm run build

ps: 会生成一个dist文件

8.关于组件库发布到npm

https://blog.csdn.net/taoerchun/article/details/82531549
ps:请按照这来发布,记得每一次发布都要改变下package.json的版本号

也许你只想直接引入组件库,并不想发布到npm上,你可以试试 npm link

关于 npm link
你可以看这篇文章: https://www.jianshu.com/p/aaa7db89a5b2
ps: npm link 引入组件库的方式,有可能导致eslint的冲突,建议屏蔽eslint检查对打包后的js文件

9.关于项目引入组件库几种方式

发布好后,我们就可以在vue3项目代码中引入我们的组件库啦

全局引入

(1).在项目文件中的main.js引入

import legoBricks from "test-bricks-teach"
import 'well-bricks/dist/well-bricks.umd.css'

const app = createApp(App)
app.use(legoBricks)
 
app.mount('#app')

(2).直接在.vue中template中使用组件

    <test-bricks></test-bricks>

局部引入

(1).在项目文件中的main.js引入

import 'well-bricks/dist/well-bricks.umd.css'

(2).在.vue文件上引入组件,注册组件,并使用

import { TestBricks } from "test-bricks-teach"

// 注册
components: {TestBricks}

// 在template使用
 <test-bricks></test-bricks>

关于兼容js

有时候兼容以前写的js+vue3的轮子这时候得在组件里加入index.d.ts声明文件

declare  const List:any
declare  const name:any

ps:该用any大法就用any大法

谈谈优点和缺点

优点:
1.提升团队开发效率,插拔式引入,没有额外配置
2.规范团队代码质量,提取常用轮子,可以专门维护
3.有些第三方的库可以直接在组件库集成,比如像是echarts,写一个可以自动适应的echarts容器组件

缺点:
1.引入了tailwindcss后,tailwindcss有一个默认是初始化的css,类似于reset.css,引入组件库会吧项目的初始样式覆盖(这一点还没有优雅处理办法,我一般是再用reset.css在覆盖一次)

最后

1.你觉得嫌麻烦一步一步来,你可以直接下载源码,编写自己的组件库的组件

git clone git@github.com:pyh996/vue3-rollup-tailwindcss.git

github地址: https://github.com/pyh996/vue3-rollup-tailwindcss

2.介绍一款tailwindcss的组件样式库,非常好看,可以拿来直接打包,超级好用~

https://tailblocks.cc

下一篇是介绍如何写一个高质量的组件
手摸手教你写大屏自适应容器组件