【vue-cli】vue-cli@2源码学习

vue-cli 2 源码

@vue/cli: 3.11.0创建项目

vue create 项目名称

@vue/cli: 2.x.x 创建项目

vue init webpack yhh-project

脚手架初始化项目流程：

下载vue/cli@2 源码
下载完成后初始化

npm i

创建项目

vue init webpack yhh-project

vue-init：

bin/vue-init

#!/usr/bin/env node

// 下载远程仓库
const download = require('download-git-repo')
// 命令行处理工具
const program = require('commander')
// 路径检查
const exists = require('fs').existsSync
// path
const path = require('path')
// 作为等待图标使用
const ora = require('ora')
// 用户根目录
const home = require('user-home')
// 波浪符路径转换
const tildify = require('tildify')
// 高亮打印
const chalk = require('chalk')
// 命令行与开发者交互工具
const inquirer = require('inquirer')
// 
const rm = require('rimraf').sync
// 日志打印
const logger = require('../lib/logger')

// 内部自定义方法
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')

// 是否为本地路径
const isLocalPath = localPath.isLocalPath
// 本地模版存放路径
const getTemplatePath = localPath.getTemplatePath

/**
 * Usage. 配置commander 使用方法 
 */
program
  .usage('<template-name> [project-name]')
  .option('-c, --clone', 'use git clone')
  .option('--offline', 'use cached template')

/**
 * Help.
 */

program.on('--help', () => {
   
  console.log('  Examples:')
  console.log()
  console.log(chalk.gray('    # create a new project with an official template'))
  console.log('    $ vue init webpack my-project')
  console.log()
  console.log(chalk.gray('    # create a new project straight from a github template'))
  console.log('    $ vue init username/repo my-project')
  console.log()
})

/**
 * Help.
 */

function help () {
   
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

/**
 * Settings. 配置项变量的设置
 */
// 模板名称
let template = program.args[0] 
// 是否包含/
const hasSlash = template.indexOf('/') > -1
// 项目构建目录名称
const rawName = program.args[1]
// 是否存在当前路径名称
const inPlace = !rawName || rawName === '.'
const name = inPlace ? path.relative('../', process.cwd()) : rawName
const to = path.resolve(rawName || '.')
const clone = program.clone || false

// 本地模板地址
const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {
   
  console.log(`> Use cached template at ${
     chalk.yellow(tildify(tmp))}`)
  template = tmp
}

/**
 * Padding.
 */
// 结束行
console.log()
process.on('exit', () => {
   
  console.log()
})
// 命令： vue init webpack yhh-project
// const rawName = program.args[1] // yhh-project
// const inPlace = !rawName || rawName === '.' // false
// to : 项目名称文件路径 // User/../../yhh-project/
// 判断：当前项目名称不存在相同名称的文件夹时询问：在当前目录中生成项目？
//        否则询问：目标目录已存在，是否继续？
// inPlace : 是否为当前路径下构建项目
// exists(to) : 存在当前路径
if (inPlace || exists(to)) {
   
  inquirer.prompt([{
   
    type: 'confirm',
    message: inPlace
      ? 'Generate project in current directory?'
      : 'Target directory exists. Continue?',
    name: 'ok'
  }]).then(answers => {
   
    if (answers.ok) {
   
      run()
    }
  }).catch(logger.fatal)
} else {
   
  run()
}

/**
 * Check, download and generate the project.
 */
// init 主函数
function run () {
   
  // check if template is local
  // 检查是否为本地模版
  // let template = program.args[0] // webpack
  if (isLocalPath(template)) {
   
    // 获取模版文件路径
    const templatePath = getTemplatePath(template)
    // 判断模版文件是否存在
    if (exists(templatePath)) {
   
      // 开始生成框架
      generate(name, templatePath,