手写Vue3源码——搭建Monorepo环境

搭建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文件，可以提供准确的组件库信息、依赖管理和脚本命令，方便其他人使用和开发你的组件库。