《翻转组件库之打包》

Posted 2022-12-05 杨晓风-linda

背景

资料相关

具体流程

Webpack打包js

Gulp打包css

统一打包

---

背景

继《翻转组件库之卡片设计》_杨晓风-linda的博客-CSDN博客博客之后，业务内容基本完毕，接下来涉及到的内容便是打包，构建，发布，使用文档等内容，本篇博客主要内容为使用Webpack打包js、使用Gulp打包css的相关内容

资料相关

1、Webpack：概念 | webpack 中文文档

2、Gulp：gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网

具体流程

Webpack打包js

1、在跟目录下新建webpack.component.js

/*
 * @Descripttion: 
 * @version: v1.0
 * @Author: linda
 * @Date: 2022-03-03 22:20:16
 * @LastEditors: linda
 * @LastEditTime: 2022-03-03 22:55:09
 */
const path = require('path')
const  VueLoaderPlugin  = require('vue-loader')
// 引入glob库遍历components文件夹（glob：node的static库）
const glob = require('glob')
const list = 
// 同步读取文件，使用async
async function makeList(dirPath, list) 
  // 拿到dirPath文件夹下所有index.js文件路径
  const files = glob.sync(`$dirPath/**/index.js`)
  // 循环遍历拆分拿到list，数据结构：card: './components/lib/card/index.js'
  for (let file of files) 
   const component = file.split(/[/.]/)[2];
   list[component] = `./$file`
  
  console.log(list);


makeList('components/lib', list)
module.exports = 
  mode: 'development', // 打包模式
  // 入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始
  entry: list,
  // output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
  output: 
    filename: '[name].umd.js', // 打包后输出的组件文件名
    path: path.resolve(__dirname, 'dist'), // fix输出路径必须为absolute path（绝对路径）
    library: 'mui',
    libraryTarget: 'umd'
  ,
  // webpack不识别.vue文件，引入插件vue-loader，进行转换
  plugins: [new VueLoaderPlugin()],
  module: 
    rules: [
      
        test: /\\.vue$/,
        use: [
          
            loader: 'vue-loader'
          
        ]
      
    ]
  

1、文件名称自定义即可

2、文件的主要内容是只需要导出一个对象，给到webpack即可

2、添加package.json打包js的命令 

  "scripts": 
    "build:js": "webpack --config ./webpack.component.js"
  ,

Gulp打包css

1、安装相关依赖包

npm i gulp gulp-sass node-sass gulp-minify-css -D

2、在根目录新建：gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));
const minifyCSS = require('gulp-minify-css');

gulp.task('sass', async function () 
    return gulp.src('components/css/**/*.scss')
    .pipe(sass())
    .pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'))
)

3、添加package.json打包css的命令 

  "scripts": 
    "build:css": "npx gulp sass"
  ,

统一打包

1、编辑package.json, 统一打包css和js

  "scripts": 
    "build:js": "webpack --config ./webpack.component.js",
    "build:css": "npx gulp sass",
    "build": "npm run build:js && npm run build:css"
  ,

截止目前为止，组件库打包的相关工作就截止了，敬请期待组件库发布的相关内容...