VueCli3源码分析 - 构建入口文件和初始化项目结构

2023-12-23 03:09:07

在日常开发中，脚手架工具已经成为我们开发项目的必备工具。它能够帮助我们快速搭建项目的基本结构，提供项目规范和约定，从而提高个人或团队合作之间的效率。因此，系统性地掌握脚手架的底层知识是非常重要的。

今天，我们将深入分析VueCli3的源码，带大家了解如何构建入口文件create.js，如何确定项目名称和目录，以及如何创建核心文件Creator.js。希望通过本文，能够帮助大家更深入地理解脚手架的底层实现，并能够在日常开发中更加灵活地使用脚手架。

构建入口文件create.js

首先，让我们从构建入口文件create.js开始。这个文件是整个脚手架的入口，它负责解析命令行参数、加载必要的模块并启动脚手架。

// create.js
const program = require('commander')
const chalk = require('chalk')
const download = require('download-git-repo')

program
  .version('0.1.0')
  .command('create <project-name>')
  .description('create a new project')
  .action((projectName) => {
    console.log('projectName:', projectName)
    // ...
  })

program.parse(process.argv)

在上面的代码中，我们首先使用了commander库来定义命令行参数。然后，我们加载了chalk和download-git-repo这两个模块。chalk库用于在命令行中输出彩色文本，download-git-repo库用于下载git仓库。

接下来，我们定义了create命令。这个命令接受一个参数，即项目名称。当用户在命令行中输入vue-cli-3 create my-project时，就会触发这个命令。

在action函数中，我们首先输出项目名称，然后使用download-git-repo库从远程仓库下载项目模板。

确定项目名称和目录

接下来，我们需要确定项目名称和目录。在VueCli3中，项目名称和目录是通过命令行参数来指定的。如果用户没有指定项目名称，则脚手架会自动生成一个随机的项目名称。

// create.js
const program = require('commander')
const chalk = require('chalk')
const download = require('download-git-repo')

program
  .version('0.1.0')
  .command('create <project-name>')
  .description('create a new project')
  .action((projectName) => {
    console.log('projectName:', projectName)
    // ...
  })

// 如果用户没有指定项目名称，则生成一个随机的项目名称
if (!projectName) {
  projectName = generateRandomProjectName()
}

// ...

在上面的代码中，我们首先检查用户是否指定了项目名称。如果没有指定，则调用generateRandomProjectName()函数生成一个随机的项目名称。

创建核心文件Creator.js

最后，我们需要创建核心文件Creator.js。这个文件负责创建项目目录、下载项目模板并安装依赖项。

// Creator.js
const fs = require('fs')
const path = require('path')
const chalk = require('chalk')

class Creator {
  constructor(projectName) {
    this.projectName = projectName
    this.projectPath = path.resolve(process.cwd(), projectName)
  }

  // 创建项目目录
  createProjectDirectory() {
    if (!fs.existsSync(this.projectPath)) {
      fs.mkdirSync(this.projectPath)
      console.log(chalk.green('create project directory success!'))
    } else {
      console.log(chalk.red('project directory already exists!'))
    }
  }

  // 下载项目模板
  downloadProjectTemplate() {
    // ...
  }

  // 安装依赖项
  installDependencies() {
    // ...
  }
}

module.exports = Creator

在上面的代码中，我们首先定义了一个Creator类。这个类有两个属性：projectName和projectPath。projectName属性存储项目名称，projectPath属性存储项目路径。

接下来，我们定义了三个方法：createProjectDirectory()、downloadProjectTemplate()和installDependencies()。createProjectDirectory()方法负责创建项目目录，downloadProjectTemplate()方法负责下载项目模板，installDependencies()方法负责安装依赖项。