从零搭建组件库

前言

我们的组件库采用的是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下,下载本地的包?

相关推荐
前端开发与ui设计的老司机10 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人12 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景34 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互