手摸手从浅析vue-cli原理到定制前端开发模板

前言

从迷糊小生到职场菜鸟，遇到无数难以解决的问题。幸得职场路上有大佬手摸手悉心教导，终于学会独自开着手扶拖拉机出混迹江湖。遥想当时初入江湖，灵魂三问“据说你vue用得挺熟练，写个vue-cli吧？”、“这边须要定制化前端开发模板，你来加优化方案吧？”、“把vue-cli和webpack合在一块儿作个模板吧？” 。下面将手摸手从浅析vue-cli源码到webpack定制开发模板，文章内容比较多，因此分红了两部分。css

1 背景

vue-cli是vue官方提供快速建立项目的辅助脚手架工具，能够帮助咱们快速建立新项目。官方提供几个经常使用的模板。具体vue-cli怎么使用，相信大伙已经玩得贼溜，不懂的伙伴能够查阅官方文档。可是在平常开发中，咱们须要根据脚手架增添各类不一样的结构和经常使用工具，单纯的简单的模板已经知足不了咱们的需求，因此想要定制化模板。“工欲善其事，必先利其器”，要想更好去定制模板，要先更了解vue-cli的原理，而后去定制前端模板。若有不妥之处，请轻喷，多多指教。前端

2 模板meta.js范例

单纯阅读vue-cli源码，在生成模板处理中须要对照着meta配置文件阅读比较清晰，这里贴了一份本身根据webpack模板配置的有关内容vue

依赖项

sortDependencies为项目模板的依赖排序，installDependencies是为模板渲染完毕以后安装项目依赖npm包，runLintFix是执行eslint格式化不合法的代码格式node


const {
  sortDependencies,
  installDependencies,
  runLintFix,
  printMessage,
} = require('./utils')
const path = require('path')

const { addTestAnswers } = require('./scenarios')
复制代码

配置文件选项

addTestAnswers是在模板运行测试时，将为所选场景添加答案；helpers是模板文件预约义的模板渲染辅助函数；prompts是定义须要收集的依赖变量；filters是预约义的根据条件过滤的文件；complete是模板渲染完毕以后，执行的函数，这里的做用是根据用户选择是否须要自动安装npm包依赖和格式化代码风格。react

辅助函数和为选项添加答案


module.exports = {
  metalsmith: {
    before: addTestAnswers
  },
  helpers: {
    if_or(v1, v2, options) {
      if (v1 || v2) {
        return options.fn(this);
      }
      return options.inverse(this);
    }
  },
  
复制代码

定义的prompts问题

prompts: {
    name: {
      when: "isNotTest",
      type: "string",
      required: true,
      message: "项目名称"
    },
    router: {
      when: "isNotTest",
      type: "confirm",
      message: "安装vue-router?"
    },
    vuex: {
      when: "isNotTest",
      type: 'confirm',
      message: '安装vuex?'
    },
    autoInstall: {
      when: 'isNotTest',
      type: 'list',
      message:
        '建立项目后，咱们应该为您运行`npm install`吗?',
      choices: [
        {
          name: '是的,使用npm',
          value: 'npm',
          short: 'npm',
        },
        {
          name: '是的,使用yarn',
          value: 'yarn',
          short: 'yarn',
        },
        {
          name: '不用了，我手动安装它',
          value: false,
          short: 'no',
        },
      ]
    }
  },
复制代码

filters和complete

filters定义了根据收集的变量是否为真来决定是否须要删除这些文件。complete是项目构建完毕以后，执行的钩子函数，根据脚手架vue-cli,若是complete不存在，能够另外定义一个completeMessage字符串。webpack

filters: {
  'src/router/**/*': "router",
  'src/store/**/*': "vuex"
},
complete: function(data, { chalk }) {
  const green = chalk.green

  sortDependencies(data, green)

  const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)

  if (data.autoInstall) {
    installDependencies(cwd, data.autoInstall, green)
      .then(() => {
        return runLintFix(cwd, data, green)
      })
      .then(() => {
        printMessage(data, green)
      })
      .catch(e => {
        console.log(chalk.red('Error:'), e)
      })
  } else {
    printMessage(data, chalk)
  }
}
};
复制代码

定制项目内容

官方的webpack项目内容定义在webpack/template中，主要对package.json和router以及readme.MD嵌入了handlerbars的语法进行条件渲染。对官方模板进行了删减，只定义部分变量，方便理解。ios

package.json

下面{{}}是占位，根据vue-cli脚手架收集变量值和依赖库来条件渲染来条件渲染啊内容git

{
  "name": "{{name}}",
  "version": "{{version}}",
  "description": "{{description}}",
  "main": "./src/main.js",
  "dependencies": {
    {{#vuex}}
    "vuex": "^3.1.0",
    {{/vuex}}
    {{#router}}
    "vue-router": "^3.0.1",
    {{/router}}
    "vue": "^2.5.2"
  }
  // ... 省略部份内容
}
复制代码

main.js

项目入口文件也是根据收集的库依赖来动态增长或者删除内容达到定制项目github

import Vue from 'vue'
import App from './App'
// {{#router}}
import router from './router'
// {{/router}}

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // {{#router}}
  router,
  // {{/router}}
  render: h => h(App)
})
复制代码

3 vue-cli目录设计

本文采用的是vue-cli的版本是 2.96，如今vue-cli已经更新到了4版本，可是内部原理仍是同样，接下来先手摸手解析vue-cli的代码。web

大致思路

❝
vue-cli主要提供vue init、 vue list 两个主要命令； vue init 功能是根据提供的模板生成项目，而vue list 是罗列出官方提供可以使用的模板。官方把脚手架和模板分离，我的认为是方便模板更新与脚手架解耦，另外一方面也为提供第三方模板提供条件(膜拜大佬操做)。
❞

第一次使用 vue init [模板名] [项目名]从远程安装模板时，会根据模板名称是否带有‘/’区分是第三方模板仍是官方模板进行下载，将模板下载并存入计算机用户根目录。下次下载时可直接从缓存中读取模板，生成最终的开发目录结构。

目录结构

vue-cli主要命令有vue init和vue list两个命令，第一个命令是咱们此次主讲的一个命令，vue-list是经过请求github respo的api获取可以使用的模板列表，比较简单。

+---bin
|   |--- vue
|   |--- vue-build
|   |--- vue-create
|   |--- vue-init
|   \--- vue-list
|
|
\---lib
     |--- ask.js
     |--- check-version.js
     |--- eval.js
     |--- filter.js
     |--- generate.js
     |--- git-user.js
     |--- local-path.js
     |--- logger.js
     |--- options.js
     \--- warnings.js
复制代码

bin目录中定义了vue 、init、create、build、list,其中vue-create已经在vue-cli3以上版本使用，vue-build已移除。因此会重点去了解init和list。其中lib目录是辅助函数目录，会在下面详细描述。

4 vue命令源码

终于进入正题，这里会按照命令vue到vue list、vue init顺序递进,来手摸手，手把手，冲 ─=≡Σ(((つ•̀ω•́)つ

❝
vue命令源码定义在bin/vue文件中,源码中引入了commander包，commander是node.js 命令行接口的完整解决方案，这里是定义bash的命令,具体怎么使用请跳移tj大神commander仓库。里面文档比较齐全。
❞

#!/usr/bin/env node
const program = require('commander')
// 定义了init list build create几个命令和版本号
program
  .version(require('../package').version)
  .usage('<command> [options]')
  .command('init', 'generate a new project from a template')
  .command('list', 'list available official templates')
  .command('build', 'prototype a new project')
  .command('create', '(for v3 warning only)')
program.parse(process.argv)
复制代码

当在bash中只输入vue指令时就会输出command定义的命令提示信息反馈。

5 vue list源码

vue list命令是经过请求Github的api获取当前组织仓库列表信息，展现到bash,这个命令用到几个常见的库:

❝
request: 发起处理网络请求的库,这里用作请求github api
chalk: bash输出文字高亮美观
logger: 自定义函数,打印信息
❞

代码解析

#!/usr/bin/env node

const logger = require('../lib/logger')
const request = require('request')
const chalk = require('chalk')

// 定义用户退出时事件
console.log()
process.on('exit', () => {
  console.log()
})


// 请求vue的官方仓库,这里能够看到是 https://api.github.com/users/vuejs-templates/repos
request({
  url: 'https://api.github.com/users/vuejs-templates/repos',
  headers: {
    'User-Agent': 'vue-cli'
  }
}, (err, res, body) => {
  if (err) logger.fatal(err)
  // 返回官方模板列表数据
  const requestBody = JSON.parse(body)
  if (Array.isArray(requestBody)) {
    console.log(' Available official templates:')
    console.log()
    requestBody.forEach(repo => {
      console.log(
        ' ' + chalk.yellow('★') +
        ' ' + chalk.blue(repo.name) +
        ' - ' + repo.description)
    })
  } else {
    console.error(requestBody.message)
  }
})
复制代码

执行结果

在输入vue list时，会执行上面的代码，请求https://api.github.com/users/vuejs-templates/repos获取到模板列表信息,以下面所示:

$ vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot- reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick  prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot re load, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick p rototyping.
复制代码

自定义仓库信息

在自定义模板仓库时，若是不想经过请求获取仓库列表信息，能够经过在脚手架中定义一份关于仓库信息，每次输入vue list，读取本地文件进行展现，不过这样每次有模板更新，都要更新脚手架，因此为了解耦，建议经过网络请求读取的方式。若是内部团队使用，而且不平常更新能够采用下面的方式。

经过读取本地文件

#!/usr/bin/env node
const chalk = require("chalk");
const templates = require("../templates")
console.log(chalk.cyan('\nThere are some avaiable templates: \n'))
templates.forEach((item,index) => {
    console.log(chalk.yellow('★') + ` ${chalk.green(item.name)} - ${chalk.cyan(item.descriptions)}\n`)
    console.log(` url: ${chalk.underline(item.url)} \n`)
})
复制代码

templates定义

下面是做者定制了两个模板，一个是React + typescript和vue的模板，能够经过vue init ly-templates/vue(或者react) 项目名进行加载。

const templates = [
  {
    name: "vue",
    url: "https://github.com/ly-templates/vue",
    descriptions: "a single page web project template for vue"
  },
  {
    name: "react",
    url: "https://github.com/ly-templates/react",
    descriptions: "a single page web project template for react"
  }
];
module.exports = templates
复制代码

6 vue init源码

终于到主菜了，通常最后都是难啃的骨头，也是最想去了解的地方，先缓解一下紧张的神经:

vue init依赖库

运行vue init命令首先执行vue-init文件，去拨开她神秘的..（Σσ(・Д・；)我我我只是揭开了面纱!!!）

下面会是依赖模块的做用解析：

// 下载github仓库的库，支持github、gitlab
const download = require('download-git-repo')
// 定义bash命令
const program = require('commander')
// nodejs内置模块fs判断文件目录是否存在函数
const exists = require('fs').existsSync
// nodejs内置模块，处理统一路径
const path = require('path')
// 提供动态loading视觉，生动形象
const ora = require('ora')
// 获取系统用户根目录路径
const home = require('user-home')
//将绝对路径转换成带波浪符的路径
const tildify = require('tildify')
// 将bash打印信息高亮
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
复制代码

定义help命令

❝
vue inti 命令提供经过git clone下载github仓库的方式,只要指定--clone或者-c的命令参数，也能够明确指定采用用户根目录的缓存模板生成项目.
❞

// 指定下载仓库的方式和生成项目是否从缓存中读取
program
  .usage('<template-name> [project-name]')
  .option('-c, --clone', 'use git clone')
  .option('--offline', 'use cached template')
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()
})
// 若是只指定了vue init,没有指定模板名，调用help命令打印提示信息
function help () {
  program.parse(process.argv)
  if (program.args.length < 1) return program.help()
}
help()

复制代码

模板指定和项目名

❝
经过vue init webpack demo命令生成项目目录结构，首先会先获取模板名和项目名称。若是当前没有指定项目名或者指定为'.',则会提示在当前目录生成项目和取消选择。
❞

// 获取模板名称
let template = program.args[0]
// 判断是官方仓库仍是三方仓库，好比本身定义的React模板，指定为
'ly-templates/react'
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 || '.')
// 是够是采用git clone方式下载
const clone = program.clone || false
// 设置缓存模板目录到用户根目录的路径
const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
// 若是指定经过--offline方式，从本地缓存获取模板
if (program.offline) {
  console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
  template = tmp
}
console.log()
// 监听用户退出事件
process.on('exit', () => {
  console.log()
})
//若是没指定项目名称或者要生成目录的绝对路径中已存在同名目录
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()
}
复制代码

下载模板逻辑

❝
下载主要逻辑是判断是否从缓存中的模板生成目录，仍是第三方或者官方远程仓库读取模板仓库并进行下载，中间对以往废弃的官方模板进行检测，并进行提示。
❞

function run () {
  //是不是本地路径，
  if (isLocalPath(template)) {
    // 获取本地模板的绝对路径
    const templatePath = getTemplatePath(template)
    // 判断是否存在模板
    if (exists(templatePath)) {
      //生成项目函数
      generate(name, templatePath, to, err => {
        if (err) logger.fatal(err)
        console.log()
        logger.success('Generated "%s".', name)
      })
    } else {
      logger.fatal('Local template "%s" not found.', template)
    }
  } else { // 经过网络安装方式
    //检查是否存在新版本的vue-cli，固然这里已经存在vue-cli更新
    checkVersion(() => {
      // 若是是官方模板
      if (!hasSlash) {
        // 指定官方模板git地址
        const officialTemplate = 'vuejs-templates/' + template
        // 模板名称不存在'#'
        if (template.indexOf('#') !== -1) {
          //下载生成模板
          downloadAndGenerate(officialTemplate)
        } else {
          //检查模板名是带有 '-2.0'
          if (template.indexOf('-2.0') !== -1) {
            //若是模板名存在`-2.0`,提示以前版本已废弃，不需指定-2.0
            warnings.v2SuffixTemplatesDeprecated(template, inPlace ? '' : name)
            return
          }
          downloadAndGenerate(officialTemplate)
        }
      } else {
        // 第三方模板下载
        downloadAndGenerate(template)
      }
    })
  }
}
复制代码

这里原先对于downloadAndGenerate对模板进行下载的时候对于本地缓存已存在的模板进行删除比较迷惑，后来也想通了。多是做者想把脚手架和仓库模板解耦,方便对模板仓库随时进行更新。这样用户就能够每次经过网络下载的时候获得的都是最新的模板。


function downloadAndGenerate (template) {
  //设置下载模板中提示信息
  const spinner = ora('downloading template')
  //显示loading
  spinner.start()
  // 若是本地已存在模板，则进行删除
  if (exists(tmp)) rm(tmp)
  // 下载模板名
  download(template, tmp, { clone }, err => {
    spinner.stop()
    if (err) logger.fatal('Failed to download repo ' + template + ': ' + err.message.trim())
    generate(name, tmp, to, err => {
      if (err) logger.fatal(err)
      console.log()
      logger.success('Generated "%s".', name)
    })
  })
}
复制代码

7 gernarate文件

❝
Metalsmith是一个静态网站生成器，主要的执行步骤包括读取前端模板的meta.js或者meta.json模板配置（其中包括是否认义询问的问题和文件过滤的配置），而后根据模板配置过滤不须要的类库和文件，最后生成咱们想要的项目文件。
❞

generate依赖

chalk: bash打印颜色高亮类库
Metalsmith: 静态网站生成器
Handlebars: 前端模板引擎，相似的还有ejs
async：支持异步处理的模块
consolidate：支持各类模板引擎的渲染
multimatch：支持各类条件匹配的类库
getOptions：用于读取meta.js中的模板配置
ask：处理metajs中定义的询问问题
filter：过滤文件
logger：打印信息

const chalk = require('chalk')
const Metalsmith = require('metalsmith')
const Handlebars = require('handlebars')
const async = require('async')
const render = require('consolidate').handlebars.render
const path = require('path')
const multimatch = require('multimatch')
const getOptions = require('./options')
const ask = require('./ask')
const filter = require('./filter')
const logger = require('./logger')
复制代码

模板辅助函数和生成函数

在generate.js中为模板定义模板渲染的辅助函数，并注入到模板配置中，这样就可使用询问收集的所需类库来条件式渲染模板变量和过滤文件。

辅助函数

辅助函数能够接受多个参数，最后一个参数 options 为辅助函数的钩子，调用 options.fn(this) 即输出该辅助函数运算结果为真时的内容，反之调用 options.inverse(this) 。

// 若是a和b两个变量相等
  Handlebars.registerHelper('if_eq', function (a, b, opts) {
    return a === b
      ? opts.fn(this)
      : opts.inverse(this)
  })

  Handlebars.registerHelper('unless_eq', function (a, b, opts) {
    return a === b
      ? opts.inverse(this)
      : opts.fn(this)
  })

复制代码

生成函数

传入的参数name是表明建立的目录名,src是模板的路径，dest是项目生成的路径，done是vue-init中定义的错误处理函数（若是发生错误就打印错误信息，成功就打印成功的信息）。


module.exports = function generate (name, src, dest, done) {
  // 读取模板的配置变量
  const opts = getOptions(name, src)
  // 初始化Metalsmith，这里能够看出vue模板定制的项目主要在template目录
  const metalsmith = Metalsmith(path.join(src, 'template'))
  // 获取metalsmith中的变量并注入一些自定义的变量
  const data = Object.assign(metalsmith.metadata(), {
    destDirName: name,
    inPlace: dest === process.cwd(),
    noEscape: true
  })
  // 模板文件中是否存在定义的辅助函数，若是存在就遍历注册辅助函数
  opts.helpers && Object.keys(opts.helpers).map(key => {
    Handlebars.registerHelper(key, opts.helpers[key])
  })

  const helpers = { chalk, logger }
  // 若是模板配置中存在metalsmith.before函数，那么执行该函数
  if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {
    opts.metalsmith.before(metalsmith, opts, helpers)
  }
  // 询问meta.js配置文件中定义的prompts定义好的问题
  metalsmith.use(askQuestions(opts.prompts))
    // 根据上一步收集好是否须要类库的变量，根据条件过滤文件
    .use(filterFiles(opts.filters))
    // 渲染模板文件
    .use(renderTemplateFiles(opts.skipInterpolation))
  // meta.js中是否存在after函数，存在就执行
  if (typeof opts.metalsmith === 'function') {
    opts.metalsmith(metalsmith, opts, helpers)
  } else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') {
    opts.metalsmith.after(metalsmith, opts, helpers)
  }

  metalsmith.clean(false)
    // 从模板根目录开始构建而不是`./ src`开始，后者是Metalsmith的`source`默认设置
    .source('.') 
    // 在dest路径生成项目文件
    .destination(dest)
    .build((err, files) => {
      done(err)
      // 若是配置文件中存在compltete函数就执行
      if (typeof opts.complete === 'function') {
        const helpers = { chalk, logger, files }
        opts.complete(data, helpers)
      } else {
        //不然打印配置中定义的completeMessage函数
        logMessage(opts.completeMessage, data)
      }
    })

  return data
}
复制代码

自定义metalsmith中间件

在generate中定义了两个metalsmith中间件，一个是askQuestions （用于询问问题），一个是filterFiles（用于根据条件过滤文件）

askQuestions

(files,metalsmith,done)是metalsmith中间件(插件)所需参数和格式，其中ask是自定义的函数，主要处理模板配置文件中的prompts问题。

function askQuestions (prompts) {
  return (files, metalsmith, done) => {
    ask(prompts, metalsmith.metadata(), done)
  }
}
复制代码

下面是ask.js内容

// 支持询问问题的类型
const promptMapping = {
  string: 'input',
  boolean: 'confirm'
}
// prompts是配置中的询问数组，data是metalsmith变量，done是处理函数（同上）
module.exports = function ask (prompts, data, done) {
  async.eachSeries(Object.keys(prompts), (key, next) => {
    prompt(data, key, prompts[key], next)
  }, done)
}


function prompt (data, key, prompt, done) {
  // 跳过不符合条件的提示,evaluate函数是在data的做用域执行exp表达式并返回其执行获得的值
  if (prompt.when && !evaluate(prompt.when, data)) {
    return done()
  }

  let promptDefault = prompt.default
  // 若是prompt的default值是一个函数，执行函数
  if (typeof prompt.default === 'function') {
    promptDefault = function () {
      return prompt.default.bind(this)(data)
    }
  }
  // inquirer收集问题答案
  inquirer.prompt([{
    type: promptMapping[prompt.type] || prompt.type,
    name: key,
    message: prompt.message || prompt.label || key,
    default: promptDefault,
    choices: prompt.choices || [],
    validate: prompt.validate || (() => true)
  }]).then(answers => {
    if (Array.isArray(answers[key])) {
      data[key] = {}
      answers[key].forEach(multiChoiceAnswer => {
        data[key][multiChoiceAnswer] = true
      })
    } else if (typeof answers[key] === 'string') {
      data[key] = answers[key].replace(/"/g, '\\"')
    } else {
      data[key] = answers[key]
    }
    done()
  }).catch(done)
}
复制代码

filterFiles

filterFiles是根据ask.js收集的依赖变量，而后根据meta.js配置文件中定义的filter文件数组，判断是否所需，来过滤不必的文件。

function filterFiles (filters) {
  return (files, metalsmith, done) => {
    filter(files, filters, metalsmith.metadata(), done)
  }
}

// 用于条件匹配
const match = require('minimatch')
evaluate函数是在data的做用域执行exp表达式并返回其执行获得的值
const evaluate = require('./eval')

module.exports = (files, filters, data, done) => {
  // 若是没有定义filters，直接执行done
  if (!filters) {
    return done()
  }
  // 获取files的路径
  const fileNames = Object.keys(files)
  //获取filters数组定义的路径key并遍历
  Object.keys(filters).forEach(glob => {
    fileNames.forEach(file => {
      // 若是files的路径key和配置文件中定义的路径key值匹配
      if (match(file, glob, { dot: true })) {
        // 获取配置文件中定义的条件判断value
        const condition = filters[glob]
        // 若是条件不匹配,就删除metalsmith遍历的file
        if (!evaluate(condition, data)) {
          delete files[file]
        }
      }
    })
  })
  done()
}
复制代码

renderTemplateFiles 渲染模板文件

renderTemplateFiles函数中定义了renderTemplateFiles,这个我在vue官方的webpack模板中没有发现这个变量的定义，这里主要用做定义须要跳过不处理的文件，renderTemplateFiles能够是一个字符串路径，也能够是一个数组

function renderTemplateFiles (skipInterpolation) {
  skipInterpolation = typeof skipInterpolation === 'string'
    ? [skipInterpolation]
    : skipInterpolation
  return (files, metalsmith, done) => {
    const keys = Object.keys(files)
    //获取metalsmith的变量
    const metalsmithMetadata = metalsmith.metadata()
    // 异步处理，若是有定义须要跳过的文件,而且和当前遍历的文件相匹配，则执行下一个
    async.each(keys, (file, next) => {
      // skipping files with skipInterpolation option
      if (skipInterpolation && multimatch([file], skipInterpolation, { dot: true }).length) {
        return next()
      }
      //获取当前遍历文件file的内容（字符串形式）
      const str = files[file].contents.toString()
      // 若是当前文件内容不含有handlerbars的变量定义语法，则跳过该文件
      if (!/{{([^{}]+)}}/g.test(str)) {
        return next()
      }
      // 把文件中定义的变量替换成metalsmith的变量值
      render(str, metalsmithMetadata, (err, res) => {
        if (err) {
          err.message = `[${file}] ${err.message}`
          return next(err)
        }
        // 而后对文件内容从新赋值，这里new Buffer内容已经被nodejs舍弃，能够采用new Buffer.from(res)的用法
        files[file].contents = new Buffer(res)
        next()
      })
    }, done)
  }
}
复制代码

8 options读取配置

read-metadata: 读取meta.js的配置的库
getGitUser：获取本地的git配置
validate-npm-package-name：验证npm包名
fs.existsSync：判断文件是否存在

// 读取meta.js的配置
module.exports = function options (name, dir) {
  const opts = getMetadata(dir)
  // 设置prompt选项的默认值
  setDefault(opts, 'name', name)
  // 验证name字段是否正确
  setValidateName(opts)
  // 获取本地的git配置
  const author = getGitUser()
  // 若是git中定义了author，则设定做者的选项为author提示
  if (author) {
    setDefault(opts, 'author', author)
  }

  return opts
}

function getMetadata (dir) {
// 配置文件能够命名为meta.json或者meta.js
  const json = path.join(dir, 'meta.json')
  const js = path.join(dir, 'meta.js')
  let opts = {}

  if (exists(json)) {
    opts = metadata.sync(json)
  } else if (exists(js)) {
    const req = require(path.resolve(js))
    if (req !== Object(req)) {
      throw new Error('meta.js needs to expose an object')
    }
    opts = req
  }

  return opts
}
复制代码

9 git-user

git-user主要使用了nodejs的exec运行本地git命令获取git设置中的email和user值

const exec = require('child_process').execSync

module.exports = () => {
  let name
  let email

  try {
    name = exec('git config --get user.name')
    email = exec('git config --get user.email')
  } catch (e) {}

  name = name && JSON.stringify(name.toString().trim()).slice(1, -1)
  email = email && (' <' + email.toString().trim() + '>')
  return (name || '') + (email || '')
}
复制代码

总结上面介绍，主要对部分主要的代码进行了解释，对于一些感受比较好懂和对主流程不是过重要的代码进行了删减。你们在读完以后，建议本身动手定制一个项目模板，本身手动定制了一个react + typescript和 vue的项目模板。

点赞加关注

看到这里了就点个赞支持下啦~，你的点赞，个人创做动力
关注公众号「前端好talk」，好好说说前端经历的故事