从零搭建 Vue3 组件库之环境搭建

一、组件库初始化

1.monorepo 项目初始化

yarn global add lerna
lerna init

lerna.json

{
  "packages": ["packages/*"],
  "version": "0.0.0",
  "npmClient": "yarn",
  "useWorkspaces": true
}

package.json

{
  "name": "root",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "lerna": "^3.22.1"
  }
}

2.初始化组件

lerna create button
lerna create icon

3.tsconfig 生成

yarn add typescript -W
npx tsc --init

配置 tsconfig.js

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true, // 支持模块化转化
    "skipLibCheck": true, // 跳过类库检查
    "forceConsistentCasingInFileNames": true, // 强制区分大小写
    "moduleResolution": "node", // 指定模块解析模式
    "jsx": "preserve", // 指定jsx解析模式
    "declaration": true, // 生成声明文件
    "sourceMap": true
  }
}

4. 解析 ts vue 文件类型，新建 typings/vue-element.d.ts 文件(文件名只要是.d.ts 结尾即可)

// 首先安装项目依赖Vue
yarn add vue@next -W

// 处理解析ts文件中申明的vue文件
declare module "*.vue" {
  import {defineComponent, App} from "vue";
  const component: ReturnType <typeof defineComponent> & {
    install: (app: App) => void;
  };
  export default component;
}

使用 x-ui

yarn add webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc -D -W

搭建文档环境

1. 安装 webpack 构建工具

yarn add webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc -D

yarn add babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver url-loader file-loader html-webpack-plugin css-loader sass-loader style-loader sass -D

2.babel 配置

// 在项目根目录下新建babel.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-typescript"],
  overrides: [
    {
      test: /\.vue$/,
      plugins: ["@babel/transform-typescript"],
    },
  ],
  env: {
    utils: {
      plugins: [["babel-plugin-module-resolver", { root: "x-ui" }]],
    },
  },
};

二、组件库打包

1. 打包 umd 格式组件库

使用 webpack 大包 umd 格式

// 在项目根目录下新建build/webpack.config.js文件
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  mode: "production",
  entry: path.resolve(__dirname, "../packages/x-ui/index.ts"),
  output: {
    path: path.resolve(__dirname, "../lib"),
    filename: "index.js",
    libraryTarget: "umd",
    library: "x-ui",
  },
  externals: {
    vue: {
      root: "Vue",
      commonjs: "vue",
      commonjs2: "vue",
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(ts|js)x?$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".json"], // 表示在import 文件时文件后缀名可以不写
  },
  plugins: [new VueLoaderPlugin()],
};

三、组件样式打包 组件样式采用 EBM 规范

1. 使用 gulp 打包 scss 文件

安装 gulp 打包样式

yarn add gulp gulp-autoprefixer gulp-cssmin gulp-dart-sass gulp-rename -D

样式文件目录

| button.scss | icon.scss | common | -- var.scss #提供 scss 变量 | fonts #字体 | mixins | -- config.scss #提供名称前缀 | -- mixins.scss #提供 mixin 方法 | index.scss #整合所有的 scss

config.scss

$namespace: "z"; // 修饰命名空间
$state-prefix: "is-"; // 修饰状态
$modifier-separator: "--"; // 修饰类型
$element-separator: "__"; // 划分空间分割符

var.scss

@import "../minxins/config.scss";
$--color-primary: #409EFF;
$--color-white: #FFFFFF;
$--color-black: #000000;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

mixin.scss

@import "../common/var.scss"

@mixin b($block) {
  $B: $namespace + "-" + $block;
  .#($B) {
    @content;
  }
}

@mixin when($state) {
  @at-root {
    &.#($state-prefix + $state) {
      @content;
    }
  }
}

@mixin m($modifier) {
  @at-root {
    #{&+$modifier-separator+$modifier} {
      @content;
    }
  }
}

@mixin e($element) {
  @at-root {
    #{&+$element-separator+$element} {
      @content;
    }
  }
}