文章目录
搭建Monorepo环境
全局安装pnpm
npm install pnpm -g # 全局安装pnpm
pnpm init # 初始化配置文件
创建.npmrc文件
# 和npm一样,将别的包的依赖都放在node_modules下,不加的话会放在.pnpm下
shamefully-hoist = true
创建pnpm-workspace.yaml文件
packages:
# 所有项目都放在packages目录下
- 'packages/*'
# 所有的公共组件都放在components下
- 'components/**'
# 所有公用的接口方法都放在api下
- 'api/**'
项目根目录创建packages、components、api等文件夹
我们先完成公共的api接口的方法以及调用
# 进入api文件夹,执行pnpm init
pnpm init
# 因为我们是typescript项目,所以我们还要初始化一个配置文件
tsc --init
修改package.json
{
"name": "@gyk/api",
"version": "1.0.1",
"description": "贵永康公用的接口",
"main": "index.ts",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.5.0"
}
}
创建index.ts
import UserService from "./user"
export const userService = new UserService()
具体的代码就不贴上来了
进入packages文件夹,使用vite创建一个项目
# 如果我们的项目需要用到api里面导出的某个方法,那么我们可以直接在我们的项目中导入api项目
pnpm add @gyk/api
# 使用的时候如下
import { userService } from '@gyk/api'
二、vite.config.ts组件库打包参数详解
vite.config.ts
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
build: {
/**
* - 描述:指定编译目标的浏览器兼容性。
* - 值:可以是 'esnext'、'modules'、'browser' 等。
* - 默认值:'esnext'。
* 1. 'esnext':
- 含义:将代码编译为ES6+语法,不进行任何转换。
- 适用场景:适用于现代浏览器,对ES6+语法支持良好的环境。
2. 'modules':
- 含义:将代码编译为ES模块化规范。
- 适用场景:适用于支持ES模块化规范的环境,例如现代浏览器或支持ES模块的Node.js版本。
3. 'browser':
- 含义:将代码编译为浏览器可执行的代码,包括转换ES6+语法和处理其他浏览器不支持的特性。
- 适用场景:适用于需要兼容各种浏览器的环境,会进行更多的代码转换和降级处理。
*/
target: 'esnext',
/**
* - 描述:指定输出目录,即打包后的组件库存放的位置。
* - 值:字符串类型,表示目录路径。
* - 默认值:'dist'。
*/
outDir: 'dist',
lib: {
/**
* - 描述:指定组件库的入口文件。
* - 值:字符串类型,表示入口文件路径。
* - 默认值:'src/main.js'。
*/
entry: 'src/main.js',
/**
* - 描述:指定组件库的全局变量名。
* - 值:字符串类型,表示全局变量名。
* - 默认值:'YourLibraryName'。
*/
name: 'gykPlugins',
/**
* - 描述:指定打包后的文件名。
* - 值:一个函数,接收一个参数format,用于指定输出格式。
* - 默认值:(format) => `your-library-name.${format}.js`。
* @param format
* @returns
*/
fileName: (format) => `gyk-plugins.${format}.js`,
},
rollupOptions: {
// 配置外部依赖,例如Vue或React等
/**
* - 描述:配置外部依赖,告诉rollup哪些模块是外部的,不需要打包进组件库。
* - 值:一个数组,包含需要排除的依赖模块名称。
* - 默认值:['vue']。
*/
external: ['vue'],
output: {
/**
* - 描述:配置组件库的输出格式。
* - 值:可以是 'default'、'named'、'none' 等。
* - 默认值:'named'。
* 1. 'default':
- 含义:将组件库的默认导出作为输出。
- 适用场景:适用于组件库只有一个默认导出的情况,例如使用export default导出的组件。
2. 'named':
- 含义:将命名导出作为输出。
- 适用场景:适用于组件库有多个命名导出的情况,例如使用export导出的多个组件或函数。
3. 'none':
- 含义:不导出任何内容。
- 适用场景:适用于组件库只作为外部依赖使用,不需要导出任何内容的情况。
*/
// 配置组件库的输出格式为ES module和UMD
exports: 'named',
globals: {
/**
* - 描述:配置全局变量的映射关系,用于将外部依赖模块与全局变量建立关联。
* - 值:一个对象,键是外部依赖模块名称,值是对应的全局变量名。
* - 默认值:{ vue: 'Vue' }。
*/
vue: 'Vue',
},
},
},
},
})
package.json
{
"name": "gyk-plugins",
"version": "1.0.0",
"description": "",
"main": "dist/gyk-plugins.es.js",
"module": "dist/gyk-plugins.umd.js",
"typings": "index.d.ts",
"scripts": {
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^4.4.5",
"vue": "^3.3.4"
}
}
package.json详解
当打包自定义组件库时,package.json文件中的配置项可以起到重要作用。下面是一些常见的package.json配置项及其含义:
1. "name": 指定组件库的名称。
2. "version": 指定组件库的版本号。
3. "main": 指定组件库的入口文件。
4. "module": 指定组件库的ES模块化规范的入口文件。
5. "typings": 指定组件库的类型声明文件(通常为.d.ts文件)。
6. "peerDependencies": 指定组件库所依赖的其他库的版本范围。
7. "dependencies": 指定组件库所依赖的其他库的版本范围。
8. "devDependencies": 指定组件库在开发过程中所依赖的其他库的版本范围。
9. "scripts": 定义一些命令脚本,例如构建、测试、发布等。
10. "repository": 指定组件库的代码仓库地址。
11. "keywords": 用于描述组件库的关键词,方便搜索和分类。
12. "author": 指定组件库的作者信息。
13. "license": 指定组件库的许可证类型。
这些配置项可以根据你的组件库的具体情况进行调整和配置。通过正确配置package.json文件,可以提供准确的组件库信息、依赖管理和脚本命令,方便其他人使用和开发你的组件库。