响应组织的号召,正好最近在学习 vite,活动上也正好有一篇关于阅读create-vite的任务,于是就果断的加入了,这里记录一下阅读的过程。 学习任务 源码:create-vite create-vite 不到400行代码; 可以学会如何写一个脚手架等等; 注意:如果克隆的最新的代码(最新的create-vite已升级为 ts),按照我文中的方式不能调试。推...
经过上面的分析,可以确认最终与vite相关的命令的起始位置就是vitejs/create-vite/package.json中的create-vite脚本。 那么就让我正式进入create-vite项目开始解析这个项目脚手架的执行过程吧~ 入口 create-vite项目目前位于vitejs团队的vite项目中,具体地址为:create-vite。 通过package.json中bin配置的create-vite命令,指...
github 地址:https://github.com/wang1xiang/create-vite-analysis 确定入口 通过npm init 文档我们可以知道,create 就是 init 的别名。所以上面的命令pnpm create vite就相当于pnpm init vite。 继续通过描述了解到 init 命令会转换为 npm exec,所以pnpm create vite最终被转换为pnpm exec create-vite,即npx creat...
create-vite 是一个用于创建 Vite 项目的脚手架工具。它的原理如下: create-vite 是一个命令行工具,可以通过 npm 命令来安装和使用。 在命令行中运行 create-vite 命令时,会提示用户输入项目名称和其他参数。 create-vite 会根据用户输入的信息,在当前目录下创建一个新的 Vite 项目。 创建过程中,create-vite 会...
一、create-vite的原理 create-vite的核心理念是利用ES6模块的特性和原生ESM(ECMAScript模块)进行优化。在传统的Webpack打包过程中,所有的模块都需要经过一个统一的入口文件进行打包,这就导致了在开发过程中,即使我们只修改了部分代码,也需要对整个项目进行重新打包,这无疑大大降低了开发效率。 而Vite则通过利用ES6模块...
上一篇文章借鉴create-vite搭建自己的创建项目工具(1)源码分析已经简单介绍了create-vite的源码知识,现在就来搭建自己的项目吧。 项目初始化 首先咱们先新建一个文件夹,然后执行 pnpminit 新建一个package.json文件。修改一下name和description。加一个type:"module" ...
首先,我们在packages文件夹下新建create-vite目录,并进行初始化。如下,只保留三个参数,这里就不再通过构建工具进行打包了 { "name": "create-vite", "version": "0.0.0", "bin": "index.js" } 接着,在packages\create-vite下新建index.js文件,它应当是一个立即执行函数 ...
#npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue#yarnyarn create vite my-vue-app --template vue#pnpmpnpm create vite my-vue-app --template vue#Bunbun create vite my-vue-app --template vue ...
Vite和Vue都使用monorepo的形式管理代码,将原本多代码仓库变为单代码仓库,每一个包对应的就是一个项目,这些项目都具有相关性,但在逻辑上是独立的。 主流程 入口文件 vite2/packages/create-vite/index.js 主要结构 import fs from 'node:fs' import path from 'node:path' ...
yarn create vite my-vue-app --templatevue 备注:使用“.”来在当前目录创建项目; 2.2 源码分析: 终端参数解析; 交互收集数据; 目录初始化; 拷贝模板文件夹; 重写gitignore名称; 重写package字段; 后续操作提示; 2.2.1 终端参数解析: 通过minimist模块将终端参数解析为对象形式: ...