组件库中样式及utils打包

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

前置文章：

• 搭建自己的组件库
• 组件库中如何抽离公共样式

接下来需要打包样式及公共方法，打包的整体思路就是：

先为子工程中的package.json配置build命令，然后新建gulpfile.ts文件，在gulpfile.ts文件中写打包的逻辑，需要把打包出来的文件copy到根目录下的dist文件夹中，即可。

1 安装依赖

pnpm install gulp @types/gulp sucrase -w -D 

2 配置package.json

在scripts中增加一个打包的指令。

"scripts": {
    "dev": "pnpm -C play dev",
    "build": "gulp -f build/gulpfile.ts"
  },

3 打包配置

build\utils\index.ts

//build\utils\index.ts
import { spawn } from "child_process"
import { projectRoot } from "./paths"

export const withTaskName = <T>(name: string, fn: T) =>
  Object.assign(fn, { displayName: name })

export const run = async (command: string) => {
  return new Promise((resolve) => {
    const [cmd, ...args] = command.split(" ")
    const app = spawn(cmd, args, {
      cwd: projectRoot,
      stdio: "inherit", // 直接将子进程输出
      shell: true, // 默认情况下，Linux才支持rm -rf
    })
    app.on("close", resolve)
  })
}

build\utils\paths.ts

import path from "path"

export const projectRoot = path.resolve(__dirname, "../../")

build\gulpfile.ts

import { series, parallel } from "gulp"
import { run, withTaskName } from "./utils/index"

// 打包样式、打包工具方法、打包组件库、打包每个组件、生成一个组件库、发布组件
export default series(
  withTaskName("clean", async () => run("rm -rf ./dist")),
)

3.1 打包样式配置

安装依赖：

pnpm install gulp-sass @types/gulp-sass @types/sass @types/gulp-autoprefixer  gulp-autoprefixer gulp-clean-css @types/gulp-clean-css sass -w -D

修改package.json命令：

"scripts": {
    "build": "gulp"
  },

新建packages\theme-chalk\gulpfile.ts，配置打包：

import gulpSass from "gulp-sass"
import dartSass from "sass"
import autoPrefixer from "gulp-autoprefixer"
import cleanCss from "gulp-clean-css"
import { series, src, dest } from "gulp"
import path from "path"

function complie() {
  const sass = gulpSass(dartSass)
  return src(path.resolve(__dirname, "./src/*.scss"))
    .pipe(sass.sync())
    .pipe(autoPrefixer())
    .pipe(cleanCss())
    .pipe(dest("./dist/css"))
}

export default series(complie)

修改build\gulpfile.ts里的代码：

import { series, parallel } from "gulp"
import { run, withTaskName } from "./utils/index"

// 打包样式、打包工具方法、打包组件库、打包每个组件、生成一个组件库、发布组件
export default series(
  withTaskName("clean", async () => run("rm -rf ./dist")),
  //执行packages下每个子工程的build命令进行打包
  withTaskName("buildPackages", async () =>
    run("pnpm run --parallel build --filter ./packages ")
  )
)

3.2 utils打包配置

先在package.json配置指令： packages\utils\package.json

"scripts": {
    "build": "gulp"
  },

安装依赖：

pnpm install gulp-typescript -w -D

过程中遇到的问题记录

scss-loader版本太高了，不支持这个函数，需要卸载，重新装低版本的scss-loader

vue-loader版本不匹配，需要卸了重新装： npm install vue-loader@15.9.6 -D