从零搭建组件库

前言

  我们的组件库采用的是monorepo的方式来搭建的。所以，我们会用到pnpm来完成组件库的搭建。

第一步 搭建monorepo的环境

  我们首先要安装pnpm.

npm install pnpm -g #全局安装pnpm
pnpm init #初始化package.json配置文件，私有库
pnpm install vue typescript #全局下添加依赖

不确定自己是否安装pnpm，可以使用pnpm -v在命令窗口执行，有返回的结果就代表安装成功。 我们在初始化仓库的时候，可以去掉名字，然后加上"private": true,因为这是一个私有仓库，是不用发布到npm的。 我们在执行了安装vue和typescript的模块后，需要创建一个.npmrc的文件，写上shamefully-hoist = true。是提升依赖的作用，不然安装的模块无法在node_modules下。然后重新执行，pnpm install的命令。

我们需要再次执行，pnpm tsc --init命令，这样会生成typescript的配置文件。 然后我贴出完整的tsconfig.json的配置

{
  "compilerOptions": {
    "module": "ESNext",
    //打包模块类型是ESNext
    "declaration": false,
    //默认不要声明文件
    "noImplicitAny": false,
    //支持类型不标注可以默认any
    "removeComments": true,
    //删除注释
    "moduleResolution": "node",
    //按照nide模块来解析
    "esModuleInterop": true,
    //支持es6，commonjs模块
    "jsx": "preserve",
    //jsx不转
    "noLib": false,
    //不处理类库
    "target": "es6",
    //遵循es6版本
    "sourceMap": true,
    "lib": [
      //编译时用的库
      "ESNext",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    //允许没有导出的模块中导入
    "experimentalDecorators": true,
    //装饰器语法
    "forceConsistentCasingInFileNames": true,
    //强制区分大小写
    "resolveJsonModule": true,
    //解析json模块
    "strict": true,
    //是否启动严格模式
    "skipLibCheck": true,
    //跳过类库检测
  },
  "exclude": [
    "node_modules",
    "**/__tests__",
    "dist/**"
  ]
}

然后在根目录下创建pnpm-workspace.yaml的工作空间(注意是yaml，不是yml，我犯了这样的错误)。在根目录下创建play这样的目录，主要是运行我们写好的组件。也相当于一个测试环境。测试我们的组件，在开发的时候看一看是否符合我们想要的。在根目录下创建docs文件，存放我们的文档的。然后创建一个packages的目录，主要存放组件的。里面又分了三个目录，components，theme-chalk，和utils，分别存放组件，css和工具的。然后依次在components，theme-chalk，utils下创建package.json，名字命名就是npm账号 + 包名。然后在根目录下面依次安装这三个模块。pnpm使用起来非常方便。

第二步，实现play环境

  第一步，我们需要使用命令pnpm create vite --template vue-ts,这样我们就可以看到根目录创建了play的目录。新创建的项目都是需要安装依赖的，这个我不必说了。删除掉readme.md文件和.gitignore文件。然后在根目录下配置启动文件的命令。"dev": "pnpm -C play dev".我在官网上没有找到-C的说明，在某乎上，别人就是这么用的，知道的朋友可以留言联系。

第三步，实现BEM规范

  首先我们要在utils文件下面新建createBem.ts这个文件。完整的代码如下：

const _bem = (prefixName: string, blockSuffix: string, element: string, modifier: string) => {
    if (blockSuffix) {
        prefixName += `-${blockSuffix}`;
    }
    if (element) {
        prefixName += `__${element}`;
    }
    if (modifier) {
        prefixName += `--${modifier}`;
    }
    return prefixName;
}

const createBEM = (prefixName: string) => {
    const b = (blockSuffix: string = "") => _bem(prefixName, blockSuffix, "", "");
    const e = (element: string = "") => element ? _bem(prefixName, "", element, "") : "";
    const m = (modifier: string = "") => modifier ? _bem(prefixName, "", "", modifier) : "";
    const be = (blockSuffix: string = "", element: string = "") => blockSuffix && element ? _bem(prefixName, blockSuffix, element, "") : "";
    const bm = (blockSuffix: string = "", modifier: string = "") => blockSuffix && modifier ? _bem(prefixName, blockSuffix, "", modifier) : "";
    const em = (element: string = "", modifier: string = "") => element && modifier ? _bem(prefixName, "", element, modifier) : "";
    const bem = (blockSuffix: string = "", element: string = "", modifier: string = "") => blockSuffix && element && modifier ? _bem(prefixName, blockSuffix, element, modifier) : "";
    const is = (name: string, state: boolean) => {
        state ? `is-${name}` : ""
    };
    return {
        b,
        e,
        m,
        be,
        bm,
        em,
        bem,
        is
    }
}

export const createNameSpace = (name: string) => {
    const prefixName = `z-${name}`
    return createBEM(prefixName);
}