从零搭建组件库

前言

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

第一步 搭建monorepo的环境

我们首先要安装pnpm.

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

不确定自己是否安装pnpm,可以使用pnpm -v在命令窗口执行,有返回的结果就代表安装成功。 我们在初始化仓库的时候,可以去掉名字,然后加上"private": true,因为这是一个私有仓库,是不用发布到npm的。 我们在执行了安装vuetypescript的模块后,需要创建一个.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下,下载本地的包?

相关推荐
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu12 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu12 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu12 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在12 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net