我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vite创建项目的实现步骤

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vite创建项目的实现步骤

前言

随着 Vite2 的发布并日趋稳定,现在越来越多的项目开始尝试使用它。我们使用 Vite 是一般会用下面这些命令去创建一个项目:


// 使用 npm
npm init @vitejs/app
// 使用 yarn
yarn create @vitejs/app

 
// 想指定项目名称和使用某个特定框架的模版时,可以像下面这样
// npm
npm init @vitejs/app my-vue-app --template vue
// yarn
yarn create @vitejs/app my-vue-app --template vue

运行这些命令后就会生成一个项目文件夹,对于大多数人可能觉得只要能正常创建一个项目就够了,但我出于好奇,为什么运行这些命令就会生成一个项目文件夹。这里以 yarn 为例创建项目进行说明。

yarn create 做了什么

可能很多人会疑惑,为什么很多项目的创建方式都是使用yarn create这个命令进行创建。除了这里的 Vite,我们创建 React 项目也是这样:yarn create react-app my-app
那这个命令到底做了什么,它其实做了两件事:


yarn global add create-react-app
create-react-app my-app

关于yarn create的更多内容可以看这里

源码解析

yarn create @vitejs/app命令运行后就会执行@vitejs/create-app里的代码。我们先看看这文件的项目结构

template 开头的文件夹都是各个框架和对应的typescript版本的项目模板,我们不用太关心,创建项目的逻辑都在 index.js 文件里。下面就来看看这里面都做了什么

项目依赖

首先是依赖的引入


const fs = require('fs')
const path = require('path')
const argv = require('minimist')(process.argv.slice(2))
const prompts = require('prompts')
const {
  yellow,
  green,
  cyan,
  blue,
  magenta,
  lightRed,
  red
} = require('kolorist')

fs、path是Nodejs内置模块,minimist、prompts、kolorist则分别是第三方依赖库。

  • minimist:是一个用于解析命令行参数的工具。文档
  • prompts:是一个命令行交互的工具。文档
  • kolorist:是一个使命令行输出带有色彩的工具。文档

模版配置

接下来不同框架模版的配置文件,最后生成一个模版名称的数组。


// 这里只写了vue和react框架的配置,其他的都是差的不多,感兴趣可以去看源码。
const FRAMEWORKS = [
  ......
  
  {
    name: 'vue',
    color: green,
    variants: [
      {
        name: 'vue',
        display: 'JavaScript',
        color: yellow
      },
      {
        name: 'vue-ts',
        display: 'TypeScript',
        color: blue
      }
    ]
  },
  {
    name: 'react',
    color: cyan,
    variants: [
      {
        name: 'react',
        display: 'JavaScript',
        color: yellow
      },
      {
        name: 'react-ts',
        display: 'TypeScript',
        color: blue
      }
    ]
  },
  
  ......
]

// 输出模版名称列表
const TEMPLATES = FRAMEWORKS.map(
  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
).reduce((a, b) => a.concat(b), [])

其次,由于 .gitignore 文件的特殊性,每种框架项目模版下都是先创建的 _gitignore 文件,在后续创建项目的时候再替换为 .gitignore。所以,代码里会预先定义一个对象来存放需要重命名的文件:


const renameFiles = {
  _gitignore: '.gitignore'
}

工具函数

在开始讲的核心函数之前,先来看看代码中定义的工具函数。最重要的是与文件操作相关的三个函数。

copy


function copy(class="lazy" data-src, dest) {
  const stat = fs.statSync(class="lazy" data-src)
  if (stat.isDirectory()) {
    copyDir(class="lazy" data-src, dest)
  } else {
    fs.copyFileSync(class="lazy" data-src, dest)
  }
}

copy函数则用于复制文件或文件夹 class="lazy" data-src 到指定文件夹 dest。它会先获取 class="lazy" data-src 的状态 stat,如果 class="lazy" data-src 是文件夹的话,即stat.isDirectory()为 true 时,则会调用下面将介绍的copyDir函数来复制 class="lazy" data-src 文件夹下的文件到 dest 文件夹下。反之,class="lazy" data-src 是文件的话,则直接调用 fs.copyFileSync 函数复制 class="lazy" data-src 文件到 dest 文件夹下。

copyDir


function copyDir(class="lazy" data-srcDir, destDir) {
  fs.mkdirSync(destDir, { recursive: true })
  for (const file of fs.readdirSync(class="lazy" data-srcDir)) {
    const class="lazy" data-srcFile = path.resolve(class="lazy" data-srcDir, file)
    const destFile = path.resolve(destDir, file)
    copy(class="lazy" data-srcFile, destFile)
  }
}

copyDir函数用于将某个文件夹 class="lazy" data-srcDir 中的文件复制到指定文件夹 destDir 中。它会先调用 fs.mkdirSync函数来创建制定的文件夹,然后调用fs.readdirSync从 class="lazy" data-srcDir 文件夹下获取的文件并遍历逐个复制;最后在调用copy函数进行复制,这里用到了递归,因为可能存在文件夹里的文件还是文件夹。

emptyDir


function emptyDir(dir) {
  if (!fs.existsSync(dir)) {
    return
  }
  for (const file of fs.readdirSync(dir)) {
    const abs = path.resolve(dir, file)
    if (fs.lstatSync(abs).isDirectory()) {
      emptyDir(abs)
      fs.rmdirSync(abs)
    } else {
      fs.unlinkSync(abs)
    }
  }
}

emptyDir函数用于清空 dir 文件夹下的代码。它会先判断 dir 文件夹是否存在,存在则遍历该问文件夹下的文件,构造该文件的路径 abs,当 abs 为文件夹时,会递归调用 emptyDir 函数删除该文件夹下的文件,然后再调用fs.rmdirSync删除该文件夹;当 abs 是文件时,则调用fs.unlinkSync函数来删除该文件。

核心函数

接下来就是核心功能实现的init函数。

命令行交互并创建文件夹

首先是获取命令行参数


let targetDir = argv._[0]
let template = argv.template || argv.t

const defaultProjectName = !targetDir ? 'vite-project' : targetDir

argv._[0] 代表 @vitejs/app 后的第一个参数
template则是要使用的模版名称
defaultProjectName则是我们创建的项目名称。
接下来就是使用prompts包来在命令行中输出询问,像下面这样:

具体代码如下:


// 关于命令行交互的部分代码没有全部放在这里,感兴趣的可以去看源码
let result = {}

result = await prompts(
  [
    {
      type: targetDir ? null : 'text',
      name: 'projectName',
      message: 'Project name:',
      initial: defaultProjectName,
      onState: (state) =>
        (targetDir = state.value.trim() || defaultProjectName)
    },
    ......
    
  ]
)

const { framework, overwrite, packageName, variant } = result

const root = path.join(cwd, targetDir)

if (overwrite) {
  emptyDir(root)
} else if (!fs.existsSync(root)) {
  fs.mkdirSync(root)
}

template = variant || framework || template

// 输出项目文件夹路径
console.log(`\nScaffolding project in ${root}...`)

const templateDir = path.join(__dirname, `template-${template}`)

选择完成后会返回我们选择的结果result
root是通过path.join函数构建的完整文件路径
overwrite是针对已存在我们要创建的同名文件时,是否要重写,如果重写,则调用前面的emptyDir函数清空该文件夹,如果不存在该文件夹,则调用fs.mkdirSync创建文件夹
templateDir选择的模版文件夹名称

写入文件


const write = (file, content) => {
  const targetPath = renameFiles[file]
    ? path.join(root, renameFiles[file])
    : path.join(root, file)
  if (content) {
    fs.writeFileSync(targetPath, content)
  } else {
      copy(path.join(templateDir, file), targetPath)
  }
}

const files = fs.readdirSync(templateDir)
for (const file of files.filter((f) => f !== 'package.json')) {
  write(file)
}

const pkg = require(path.join(templateDir, `package.json`))

pkg.name = packageName

write('package.json', JSON.stringify(pkg, null, 2))

const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm'

// 输出一些提示告诉你项目已经创建结束,以及告诉你接下来启动项目需要运行的命令
console.log(`\nDone. Now run:\n`)
if (root !== cwd) {
console.log(`  cd ${path.relative(cwd, root)}`)
}
console.log(`  ${pkgManager === 'yarn' ? `yarn` : `npm install`}`)
console.log(`  ${pkgManager === 'yarn' ? `yarn dev` : `npm run dev`}`)
console.log()

write函数则接受两个参数 file 和 content,它有两个功能:

  • 对指定的文件 file 写入指定的内容 content,调用fs.writeFileSync函数来实现将内容写入文件。
  • 复制模版文件夹下的文件到指定文件夹下,调用前面介绍的copy函数来实现文件的复制。

然后调用fs.readdirSync读取模版文件夹里的文件,遍历逐一复制到项目文件夹(其中要过滤的 package.json 文件,因为其中的 name 字段要修改);最后再写入 package.json 文件。

小结

Vite 的create-app包的实现只有320行左右的代码,但它考虑到各种场景的兼容处理;在学习完之后,自己去实现一个这样的CLI工具也不是什么难事。

到此这篇关于Vite创建项目的实现步骤的文章就介绍到这了,更多相关Vite创建项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vite创建项目的实现步骤

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Uni-app + Vue3 + TS +Vite 创建项目步骤

随着 Vue3 的普及,好多公司的项目都已经开始使用Vue3 + Uni-app + Vite 开发项目,顺手记录和分享一下我在这过程中遇到的问题。
Vue3Uni-appVite2024-12-01

使用Vite搭建vue3+TS项目的实现步骤

本文主要介绍了使用Vite搭建vue3+TS项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-01-11

Create vite理解Vite项目创建流程及代码实现

这篇文章主要为大家介绍了Create vite理解Vite项目创建流程及代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

go mod git项目创建步骤

Go语言的模块管理工具已于Go 1.11版本中正式上线,可以管理依赖包的版本、下载、缓存等等。使用起来十分方便,而且它支持自定义私有仓库、内网镜像,提升了公司内部开发效率。在本文中,我们将介绍如何使用Go mod来管理Git项目的依赖。请按
2023-10-22

IDEA创建Spring Boot的项目的步骤

这篇文章主要介绍“IDEA创建Spring Boot的项目的步骤”,在日常操作中,相信很多人在IDEA创建Spring Boot的项目的步骤问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”IDEA创建Sprin
2023-06-19

VueCli项目重构为Vite的方法步骤

本文主要介绍了VueCli项目重构为Vite的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-16

Visual Studio2022创建WebAPI项目步骤记录

本指南详细介绍了在VisualStudio2022中创建WebAPI项目的步骤,包括准备工作、创建新项目、配置项目、添加控制器、设置路由、创建模型类、添加数据库上下文、添加存储库接口和实现、添加服务、添加控制器动作,以及运行项目的步骤。通过遵循本指南,开发人员可以轻松地设置WebAPI项目并开始构建他们的后端服务。
Visual Studio2022创建WebAPI项目步骤记录
2024-04-02

PyCharm教程:详解项目创建步骤

PyCharm是一款功能强大的Python集成开发环境(IDE),在Python开发中被广泛使用。本文将详细介绍PyCharm中如何创建一个新项目的步骤,包括具体的代码示例。第一步,打开PyCharm。首先,我们需要确保已经安装了PyCh
PyCharm教程:详解项目创建步骤
2024-02-23

编程热搜

目录