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

发布时间:2023年12月18日

目录结构设计

  • 创建 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([]))
    
文章来源:https://blog.csdn.net/Tyro_java/article/details/134936734
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。