如何搭建一个组件库

1.新建一个文件夹life-ui

2.安装 lerna

yarn global add lerna
lerna init

自动创建 packages文件夹和lerna.json和package.json

在lerna.json下补充

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "packages": [
    "packages/*"
  ],
  "useWorkspaces": true,
  "version": "0.0.0",
  "npmClient": "yarn" //下载包的方式
}

 在package.json下补充

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "lerna": "^6.6.1",
  },
  "dependencies": {
    "typescript": "^5.0.4",
    "vue": "^3.2.36"
  }
}

3.在 packages 创建组件

4.先初始化 yarn install

5.创建button组件 lerna create button

@l-ui/button

新建index.ts和button.vue

import { App } from "vue";
import Button from "./lib/Button.vue"; 

Button.install = (app: App) => {
  // 注册组件
  app.component(Button.name, Button);
};
export default Button;

6.整合全部组件lerna create l-ui

删除无关的文件，新建index.ts 

import { App } from "vue";
import Button from "@l-ui/button";// 飘红
import Icon from "@l-ui/icon";

const components = [Button, Icon];

const install = (app: App) => {
  components.forEach((com) => {
    app.component(com.name, com);
  });
};

export default {
  install,
};

7.解析文件类型

yarn add typescript -W
npx tsc --init

 创建tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext", // 打包目标语法
    "module": "ESNext", //模块转化后的格式
    "esModuleInterop": true, // 支持模块转化
    "skipLibCheck": true, //跳过类库检测
    "forceConsistentCasingInFileNames": true, // 强制区分大小写
    "moduleResolution": "node", // 模块解析方式
    "jsx": "preserve", // 不转化jsx
    "declaration": true, // 生成声明文件
    "sourceMap": true //生成映射文件
  }
}

8.新建life-ui/typings/vue-shime.d.ts

// 处理解析ts中声明的文件

// 声明文件
declare module "*.vue" {
  // 所有通过ts from 'xxx.vue'
  import { defineComponent } from "vue";

  const component: ReturnType<typeof defineComponent> & {
    install(app: App): void;
  };
  export default component;
}

8.yarn install 安装vue

yarn install //之后 import Button from "@l-ui/button"; 不报错了
yarn add vue@next -W

9.运行vue组件新建site文件夹

 App.vue和template.html里面就写了最基本的格式这里不再赘述

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import lUi from "l-ui";

createApp(App).use(lUi).mount("#app");

10.安装项目依赖

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

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 -W

11.新建babel.config.js

• @babel/core：Babel 的所有核心功能都在这里
• @babel/cli：提供了 CLI 工具，使我们能够运行 npm run build
• @babel/preset-env：提供预置功能

module.exports = {
  //Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器，比如 IE 11。
  // 预设
  presets: [
    "@babel/preste-env", // es6转es5
    "@bael/preset-typescript", // 解析ts语法
  ],
   overrides: [
    {
      test: /\.vue$/,
      plugins: [
        // ?
        "@babel/transform-typescript",
      ],
    },
  ],
  env: {
    utils: {
      plugins: [
        // ?
        [
          "babel-plugin-module-resolver", // 为了能正确找到l-ui模块
          { root: "l-ui" },
        ],
      ],
    },
  },
};

12.新建site/webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: path.resolve(__dirname, "main.ts"), // 打包入口
  output: {
    path: path.resolve(__dirname, "../website-dist"), // 出口
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue", ".json"], // 解析文件顺序
  },
  module: {
    rules: [
      {
        // 识别vue
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        // 识别tsx
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        // 识别图标...
        test: /\.(svg|otf|ttf|woff|eot|gif|png)$/,
        loader: "url-loader",
      },
      {
        // 识别样式
        test: /\.(scss|css)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // html插件
      template: path.resolve(__dirname, "template.html"),
    }),
  ],
};

13.在package.json下添加

 "scripts": {
    "website-dev": "webpack serve --config ./site/webpack.config.js"
  }