Vue3源码梳理：设计一个微型Vue的源码框架环境

目录结构设计

• 创建 vue-mini 目录
• 在该目录中，初始化npm包：$ npm init -y
• 创建package.json文件
• 创建packages 目录，作为核心代码区域
  • 在内创建vue目录：打包，测试实例，项目整体入口模块
  • 在内创建 shared 目录：共享公共方法模块
  • 在内创建 compiler-core 目录：编译器核心模块
  • 在内创建 compiler-dom 目录：浏览器相关编译器模块
  • 在内创建 reactivity 目录：响应性模块
  • 在内创建 runtime-core 目录：运行时核心模块
  • 在内创建 runtime-dom 目录：浏览器相关运行时模块

为框架导入配置ts

• TS环境
  • 主要是类型的世界
  • $ npm i -g typescript
  • $ tsc -v
  • $tsc -init 生成ts配置文件
    • 配置文件参考：typescriptlang.org/tsconfig

引入 prettier 来格式化代码

• vscode 扩展，添加插件，搜索：Prettier - Code formatter

• 在项目根目录下，创建 .prettierrc

  {
    "semi": false, // 格式化不需要分号
    "singleQuote": true, // 格式化代码使用单引号
    "printWidth": 80, // 代码长度大于80之后，就开始换行
    "trailingComma": "none", // 不尾随添加 , 如果值为 es5, 则会在对象的最后一个自动加上 ,
    "arrowParens": "avoid" // 省略箭头函数小括号，示例：const fn = (a) => {}；always 是保留小括号 示例： const fn = a => {}
  }
  

• 如果想要配置保存时格式化，那么需要在设置中搜索 save 进行配置

• 同时注意，prettier 可能会和其他格式化工具存在冲突导致代码丢失，在使用中仅使用一个作为格式化的工具

模块打包器 rollup

• 文档：rollupjs.com
• webpack打包会产生一些冗余代码，在开发大型项目中影响不大，如果我们开发一个库，这些冗余代码就会大大增加库的体积，这就不美好了
• 这个小而美的工具就是 rollup
• 新建文件 rollup.config.js
• 默认导出数组，数组中的每一个对象都是一个单独的导出文件配置，详细可查：http://www.rollupjs.com/guide/big-list-of-options
• 安装依赖插件
  • $ cnpm i -D @rollup/plugin-commonjs@22.0.1 @rollup/plugin-node-resolve@13.3.0 @rollup/plugin-typescript@8.3.4
• 创建打包命令
  • 在package.json中添加 build命令
  • "build": "rollup -c"
  • -c 是指读取rollup的配置文件
• 编写测试代码
  *
• 开始打包：$ npm run build
  • 此时会报错：RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module.
  • 解决方案：在package.json中添加 “type” :“module”,
  • 此时仍会报错：cannot find module ‘typescript’
  • 解决方案：项目中使用ts，但是还缺少其他插件：cnpm i -D tslib@2.4.0 typescript@4.7.4
  • 此时打包成功

配置路径映射

• ts中的一项api, 也就是 路径 - path
• 可以让程序员不用相对路径访问api，只需要添加配置，就可自动解析路径
• 在tsconfig.ts中配置，compilerOptions.baseUrl = “.”
• 再配置 compilerOptions.paths

  "paths": {
    "@vue/*": [
      "packages/*/src"
    ]
  }
  

• 之后，就可以使用了, 示例

  import { isArray } from '@vue/shared'
  
  console.log(isArray([]))