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