【金秋打卡】第3天-玩转组件库搭建全流程

第一模块

​ 课程名称：玩转组件库搭建全流程

​ 章节名称：

• 3-1 设计组件
• 3-2 编写html结构的样式代码
• 3-3 编写逻辑代码
• 3-4 测试组件

​ 讲师姓名：郭小新

第二模块

​ 课程内容(概述)

​ 1、编写组件的流程

• 设计组件
• 编写html和样式
• 编写逻辑代码
• 测试组件

​ 2、设计组件的原则

​ 要能复用、通用

​ 3、项目信息

​ 基于webpack+vue2+scss

第三模块

用rollup打包组件库(一)

rollup 是一个 JavaScript 模块打包器，在功能上要完成的事和webpack性质一样，就是将小块代码编译成大块复杂的代码，平时开发应用程序时，我们基本上选择用webpack，相比之下，rollup.js更多是用于library打包，我们熟悉的vue、react、vuex、vue-router等都是用rollup进行打包的。视频中的项目是基于webpack+vue2来打包一个组件库。有样学样，顺着思路尝试学习用rollup+vue2打包一个组件库。

安装rollup

在项目下安装，有时要考虑路径问题，为了省去麻烦，采用了全局安装。

npm i rollup -g # 全局安装
npm i rollup -g # 项目本地安装

安装插件

npm install @rollup/plugin-babel rollup-plugin-postcss rollup-plugin-vue autoprefixer @vue/compiler-sfc --save-dev

rollup-plugin-postcss – 支持css文件的加载、css加前缀、css压缩、对scss/less的支持等等

@rollup/plugin-babel – 用于转换es6语法

autoprefixer 插件来给css3的一些属性加前缀

rollup-plugin-vue 用于处理.vue文件。vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

• vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
• vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

配置rollup.config.js

const path = require('path');
const { babel } = require('@rollup/plugin-babel');
const resolve = require("rollup-plugin-node-resolve")
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer')
const vue = require('rollup-plugin-vue')

const resolveFile = function (filePath) {
    return path.join(__dirname, '..', filePath)
}
module.exports = {
    // 要打包的文件(打包入口文件)
    input: 'index.js',
    output: {
        // 输出的文件(如果没有这个参数,则直接输出到控制台)
        file: resolveFile('../dist/ext-ui/index.js'),
        // Rollup 输出的文件类型
        // amd  – 异步模块定义，用于像RequireJS这样的模块加载器
        // cjs  – CommonJS，适用于 Node 和 Browserify/ Webpack
        // es   – 将软件包保存为ES模块文件
        // iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
        // umd  – 通用模块定义，以amd，cjs 和 iife 为一体
        format: 'es'
    },
    plugins: [
        resolve(),
        vue(),
        postcss({
            // 使用autoprefixer插件来给Css样式加前缀
            plugins: [autoprefixer()],
            // 是否提取到文件 这里亦可填写文件路径path.resolve('dist/my-custom-file-name.css')
            extract: true,
            // 开启压缩
            minimize: true,
            // 处理的文件后缀
            extensions: ['css', 'scss'],
        }),
        babel({
            presets: ['@babel/preset-env']
        })
    ]
}

项目结构

|-packages
|---components		 // 用于编写存放组件
|-----ext-button
|-------index.js
|-------main.vue
|---common			 // 存放样式文件	
|---index.js		 
|---rollup.config.js // 打包配置脚本

第四模块

学习页面截图