从零搭建组件库

前言

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

第一步搭建monorepo的环境

我们首先要安装pnpm.

bash 复制代码

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的配置

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.yml的工作空间。在根目录下创建play这样的目录，主要是运行我们写好的组件。也相当于一个测试环境。测试我们的组件，在开发的时候看一看是否符合我们想要的。在根目录下创建docs文件，存放我们的文档的。然后创建一个packages的目录，主要存放组件的。里面又分了三个目录，components，theme-chalk，和utils，分别存放组件，css和工具的。然后依次在components，theme-chalk，utils下创建package.json，名字命名就是npm账号 + 包名。

遇到的问题：如何用pnpm下，下载本地的包？

从零搭建组件库

前言

第一步 搭建monorepo的环境

第一步搭建monorepo的环境