随手写系列--vue-cli的Vue create my-app是如何创建模板的和自己搭建下载seed种子项目

92 阅读1分钟

Vue create会去找packages.json的bin配置的命令--具体可以自己去找文章了解

内容是: "bin": { "vue": "bin/vue.js" }

源码vue.js内容调用Creator.create方法进行创建

不想说太多--最后会调用loadRemotePreset(name, clone)方法: 核心语句:download--主要是借助download-git-repo包来拉取能让放到tmpdir目录

const fs = require('fs-extra')
const loadPresetFromDir = require('./loadPresetFromDir')

module.exports = async function loadRemotePreset (repository, clone) {
  const os = require('os')
  const path = require('path')
  const download = require('download-git-repo')

  const presetName = repository
    .replace(/((?:.git)?#.*)/, '')
    .split('/')
    .slice(-1)[0]
    // for direct urls, it's hard to get the correct project name,
    // but we need to at least make sure no special characters remaining
    .replace(/[:#]/g, '')

  const tmpdir = path.join(os.tmpdir(), 'vue-cli-presets', presetName)

  // clone will fail if tmpdir already exists
  // https://github.com/flipxfx/download-git-repo/issues/41
  if (clone) {
    await fs.remove(tmpdir)
  }

  await new Promise((resolve, reject) => {
    download(repository, tmpdir, { clone }, err => {
      if (err) return reject(err)
      resolve()
    })
  })

  return await loadPresetFromDir(tmpdir)
}


其实node是有可以直接拉取包的fs模块-fs.spawn("git", ["clone", repo, prepath])

还不知道怎么创建本地下载本地seed种子下面? 1.创建你的本地seed项目 2.fs复制你的seed项目--一般用的是文件的遍历复制+迭代处理目录情况 3.将复制的seed内容写到需要存放的目录,就可以实现模拟一个项目的创建行为--本质就是文件夹复制--不过会在读取完文件后,改写一下package.json内容