vue组件库合并样式打包成less文件

前言

基于公司需求，会搭建一个常规的组件 ui 库，简单的组件库还是非常好搭建的，我也搭建了很多次了，美滋滋的去搭建了，局部组件、公共组件，巴拉巴拉一顿输出。

在于 antdesign 经常会自己设置主题，我们的组件库需要支持 antdesign 中的变量继承，看到 antdesign 在 main.js 中可以 直接 import '*****.less'， 我是比较好奇的，但是还是真没在组件库做过。开始想到的是用 webpack 或者 gulp 进行 打包成 less ，在于本人技术实在尴尬，网上也搜不到对应的东西。 后面想想，干脆自己用 fs 的方式进行操作文件抽离出来，时间又紧迫，只好想了后就开始行动，经过几个小时的奋战，把文件的样式 class 都设置成了比较语义化，以及成功在其他项目引用修改变量能顺利修改。

开始

vue-template-compiler

我们需要分离 vue 文件中的 style 中的样式，那么vue-template-compiler必不可少！

vue-template-compiler是编译 vue 模板的包，传入模板返回AST 抽象语法树。

例子

下面是一个简单的 tooltip 小组件。

<template>
  <tooltip placement="top">
    <template slot="title" v-if="isAllShow || content.length > len">
      {{ tipContent || content }}
    </template>
    {{ content.length > len ? content.slice(0, len) + "..." : content }}
  </tooltip>
</template>
<script>
  import { Tooltip } from "ant-design-vue";
  export default {
    name: "CTooltip",
    components: { Tooltip },
    props: {
      tipContent: {
        type: String,
        default: "",
      },
      content: {
        type: String,
        default: "",
      },
      len: {
        type: Number,
        default: 12,
      },
      isAllShow: {
        type: Boolean,
        default: false,
      },
    },
  };
</script>

我们现在来获取它的结构

// 引入 vue-template-compiler
const compiler = require("vue-template-compiler");
// 处理文件与目录路径
const path = require("path");
// 处理文件的读写、复制、s删除、重命名等操作
const fs = require("fs");
// 拼接路径
const resolve = (dir) => path.join(__dirname, dir);
// 读取文件
const content = fs.readFileSync(
  resolve("./packages/components/CTooltip/index.vue"),
  "utf-8"
);
// 编译模板字符串并返回已编译的JavaScript代码及其AST树。
const ret = compiler.parseComponent(content);
console.log(ret);

运行

node demo.js

可以看到常规分为了 3 部分， template 、 script 、 styles。

我们只需要 styles 数组的东西。

遍历文件夹

合并成 less 文件，需要遍历 packages 文件夹中所有的文件，抽取出 vue 文件、less 文件 、 css 文件。

function ergodicDirectory(dirPath) {
  // 读取文件
  const files = fs.readdirSync(dirPath);
  files.forEach((file) => {
    // 当前遍历的 文件
    const filePath = path.resolve(dirPath, file);
    if (isVue(file)) {
      // 是vue文件的处理方式
      copyVue && copyVue(filePath);
    } else if (isLessOrCss(file)) {
      // 是否是 less 或 css 文件
      copyFile && copyFile(filePath);
    } else if (isDirectory(filePath)) {
      // 是否是 目录 文件夹
      ergodicDirectory(filePath);
    }
  });
}

是否是 VUE 文件

function isVue(filePath) {
  return filePath && filePath.toLowerCase().endsWith(".vue");
}

是否是 Less 或 Css 文件

function isLessOrCss(filePath) {
  return (
    filePath &&
    (filePath.toLowerCase().endsWith(".less") ||
      filePath.toLowerCase().endsWith(".css"))
  );
}

是否是文件夹

function isDirectory(filePath) {
  const stat = fs.statSync(filePath);
  return stat.isDirectory();
}

抽离 vue 中 style

function copyVue(filePath) {
  const content = fs.readFileSync(filePath, "utf-8");
  const ret = compiler.parseComponent(content);
  // 循环styles
  ret.styles &&
    ret.styles.forEach((style) => {
      // 追加内容到 规定文本
      pushStyle(style.content);
    });
}

Less、Css 文件复制

function copyFile(filePath) {
  const content = fs.readFileSync(filePath, "utf-8");
  const ret = compiler.parseComponent(content);
  pushStyle(ret.source);
}

追加到文本

arr 是存文本的全局变量

function pushStyle(data) {
  // 去掉 deep
  data = data.replace("/deep/", "");
  // 去掉 @import 引入的 文本
  const last = data.lastIndexOf('";');
  const last2 = data.lastIndexOf('");');
  if (last !== -1) arr += data.substring(last + 2);
  else if (last2 !== -1) arr += data.substring(last2 + 3);
  else arr += data;
}

文本写入

function save () {
  // 写入 的 路径地方以及名称
  fs.writeFileSync(resolve('./lib/demo.less'), arr)
}

运行的代码

ergodicDirectory(resolve("./packages"));
save();

package.json

"build": "vue-cli-service build --target lib --name custom-ant-base-ui --dest lib packages/index.js && node demo.js"

运行

npm run build

完整代码

// 引入 vue-template-compiler
const compiler = require("vue-template-compiler");
// 处理文件与目录路径
const path = require("path");
// 处理文件的读写、复制、s删除、重命名等操作
const fs = require("fs");
// 拼接路径
const resolve = (dir) => path.join(__dirname, dir);
let arr = "";

//  遍历目录
function ergodicDirectory(dirPath) {
  // 读取文件
  const files = fs.readdirSync(dirPath);
  files.forEach((file) => {
    // 当前遍历的 文件
    const filePath = path.resolve(dirPath, file);
    if (isVue(file)) {
      // 是vue文件的处理方式
      copyVue && copyVue(filePath);
    } else if (isLessOrCss(file)) {
      // 是否是 less 或 css 文件
      copyFile && copyFile(filePath);
    } else if (isDirectory(filePath)) {
      // 是否是 目录 文件夹
      ergodicDirectory(filePath);
    }
  });
}

// 是否是VUE文件
function isVue(filePath) {
  return filePath && filePath.toLowerCase().endsWith(".vue");
}

// 是否是Less或者Css文件
function isLessOrCss(filePath) {
  return (
    filePath &&
    (filePath.toLowerCase().endsWith(".less") ||
      filePath.toLowerCase().endsWith(".css"))
  );
}

// 是否是目录
function isDirectory(filePath) {
  const stat = fs.statSync(filePath);
  return stat.isDirectory();
}

function copyVue(filePath) {
  const content = fs.readFileSync(filePath, "utf-8");
  const ret = compiler.parseComponent(content);
  // 循环styles
  ret.styles &&
    ret.styles.forEach((style) => {
      // 追加内容到 规定文本
      pushStyle(style.content);
    });
}

function copyFile(filePath) {
  const content = fs.readFileSync(filePath, "utf-8");
  const ret = compiler.parseComponent(content);
  pushStyle(ret.source);
}

function pushStyle(data) {
  // 去掉 deep
  data = data.replace("/deep/", "");
  // 去掉 @import 引入的 文本
  const last = data.lastIndexOf('";');
  const last2 = data.lastIndexOf('");');
  if (last !== -1) arr += data.substring(last + 2);
  else if (last2 !== -1) arr += data.substring(last2 + 3);
  else arr += data;
}

function save() {
  // 写入 的 路径地方以及名称
  fs.writeFileSync(resolve("./lib/demo.less"), arr);
}

ergodicDirectory(resolve("./packages"));
save();

总结

对于项目紧急的情况，现在是最好的处理方式了，欢迎各位小伙伴们告诉我其他方式，后面再优化，修改。