vue-cli2.x.x源码解析(部分)

2023-12-16 20:04
文章标签 javascript 源码 vue 解析 部分 frontend cli2

本文主要是介绍vue-cli2.x.x源码解析(部分)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一.bin

先从bin文件夹开始:

vue.js

#!/usr/bin/env node
// 主入口
const program = require('commander')// 对应指令 & 具体文件
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)

vue-build

#!/usr/bin/env node
// 高亮工具
const chalk = require('chalk')console.log(chalk.yellow('\n' +'  We are slimming down vue-cli to optimize the initial installation by ' +'removing the `vue build` command.\n' +'  Check out Poi (https://github.com/egoist/poi) which offers the same functionality!' +'\n'
))

vue-init

#!/usr/bin/env node
// 加载依赖配置
// 下载远程仓库内容
const download = require('download-git-repo')
// 命令行处理工具
const program = require('commander')
// node下的文件操作了，existsSync - 检测路径是否存在
const exists = require('fs').existsSync
// node自带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')
// rm -rf js版本
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.*/
// 面试：如何使用第三方模版？
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 === '.'
// 当前目录名为项目构建目录名 or 当前目录新建子目录
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()
})// 标准的交互询问（确认类型）
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.*/
// 主功能函数
function run () {// check if template is local// 是否为本地路径if (isLocalPath(template)) {// ～/.vue-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 {// 非本地// 检查版本号checkVersion(() => {// 官方 or 第三方if (!hasSlash) {// use official templates 使用官方模板const officialTemplate = 'vuejs-templates/' + template// #可用if (template.indexOf('#') !== -1) {downloadAndGenerate(officialTemplate)} else {if (template.indexOf('-2.0') !== -1) {warnings.v2SuffixTemplatesDeprecated(template, inPlace ? '' : name)return}// warnings.v2BranchIsNowDefault(template, inPlace ? '' : name)downloadAndGenerate(officialTemplate)}} else {downloadAndGenerate(template)}})}
}/*** Download a generate from a template repo.** @param {String} template*/function downloadAndGenerate (template) {const spinner = ora('downloading template')spinner.start()// Remove if local template exists// 删除本地模版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)})})
}

vue-list

#!/usr/bin/env nodeconst logger = require('../lib/logger')
const request = require('request')
const chalk = require('chalk')/*** Padding.*/console.log()
process.on('exit', () => {console.log()
})/*** List repos.*/
// 面试：vue list展示的是所有模版吗？只有官方的吗？会展示本地缓存模版吗？->只要官方,不会展示本地缓存模板
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)}
})

二.lib

check-version.js

const request = require('request')
const semver = require('semver')
const chalk = require('chalk')
const packageConfig = require('../package.json')// 版本检测
module.exports = done => {// Ensure minimum supported node version is used// 面试：如何检测功能模块与node版本是否搭配if (!semver.satisfies(process.version, packageConfig.engines.node)) {return console.log(chalk.red('  You must upgrade node to >=' + packageConfig.engines.node + '.x to use vue-cli'))}// 面试：如何检测当前模块是否已经最新并提示用户升级request({url: 'https://registry.npmjs.org/vue-cli',timeout: 1000}, (err, res, body) => {if (!err && res.statusCode === 200) {const latestVersion = JSON.parse(body)['dist-tags'].latestconst localVersion = packageConfig.versionif (semver.lt(localVersion, latestVersion)) {console.log(chalk.yellow('  A newer version of vue-cli is available.'))console.log()console.log('  latest:    ' + chalk.green(latestVersion))console.log('  installed: ' + chalk.red(localVersion))console.log()}}done()})
}

generate.js

// 依赖加载
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')// register handlebars helper
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)
})/*** Generate a template given a `src` and `dest`.** @param {String} name* @param {String} src* @param {String} dest* @param {Function} done*/// 1. 获取一个完全体的配置
module.exports = function generate (name, src, dest, done) {// 读取配置项const opts = getOptions(name, src)// ms初始化数据const metalsmith = Metalsmith(path.join(src, 'template'))// 配置完全体合并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 }// 设置调用before钩子if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {opts.metalsmith.before(metalsmith, opts, helpers)}// 问询 + 处理 + 生成metalsmith.use(askQuestions(opts.prompts)).use(filterFiles(opts.filters)).use(renderTemplateFiles(opts.skipInterpolation))// 执行态// 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).source('.') // start from template root instead of `./src` which is Metalsmith's default for `source`.destination(dest).build((err, files) => {done(err)// complete钩子if (typeof opts.complete === 'function') {const helpers = { chalk, logger, files }opts.complete(data, helpers)} else {logMessage(opts.completeMessage, data)}})return data
}/*** Create a middleware for asking questions.** @param {Object} prompts* @return {Function}*/function askQuestions (prompts) {return (files, metalsmith, done) => {ask(prompts, metalsmith.metadata(), done)}
}/*** Create a middleware for filtering files.** @param {Object} filters* @return {Function}*/function filterFiles (filters) {return (files, metalsmith, done) => {filter(files, filters, metalsmith.metadata(), done)}
}/*** Template in place plugin.** @param {Object} files* @param {Metalsmith} metalsmith* @param {Function} done*/
// 1. 文件索引处理 2. 跳过要跳过的，去除内容字符串 3. 内容结合元数据进行渲染
function renderTemplateFiles (skipInterpolation) {// 确保是数组skipInterpolation = typeof skipInterpolation === 'string'? [skipInterpolation]: skipInterpolationreturn (files, metalsmith, done) => {const keys = Object.keys(files)const metalsmithMetadata = metalsmith.metadata()async.each(keys, (file, next) => {// 进入异步处理每个文件// skipping files with skipInterpolation optionif (skipInterpolation && multimatch([file], skipInterpolation, { dot: true }).length) {return next()}// 内容字符串const str = files[file].contents.toString()// do not attempt to render files that do not have mustachesif (!/{{([^{}]+)}}/g.test(str)) {return next()}render(str, metalsmithMetadata, (err, res) => {if (err) {err.message = `[${file}] ${err.message}`return next(err)}files[file].contents = new Buffer(res)next()})}, done)}
}/*** Display template complete message.** @param {String} message* @param {Object} data*/function logMessage (message, data) {if (!message) returnrender(message, data, (err, res) => {if (err) {console.error('\n   Error when rendering template complete message: ' + err.message.trim())} else {console.log('\n' + res.split(/\r?\n/g).map(line => '   ' + line).join('\n'))}})
}

logger.js

const chalk = require('chalk')
const format = require('util').format/*** Prefix.*/
// 统一打印管理const prefix = '   vue-cli'
const sep = chalk.gray('·')/*** Log a `message` to the console.** @param {String} message*/exports.log = function (...args) {const msg = format.apply(format, args)console.log(chalk.white(prefix), sep, msg)
}/*** Log an error `message` to the console and exit.** @param {String} message*/exports.fatal = function (...args) {if (args[0] instanceof Error) args[0] = args[0].message.trim()const msg = format.apply(format, args)console.error(chalk.red(prefix), sep, msg)process.exit(1)
}/*** Log a success `message` to the console and exit.** @param {String} message*/exports.success = function (...args) {const msg = format.apply(format, args)console.log(chalk.white(prefix), sep, msg)
}

这篇关于vue-cli2.x.x源码解析(部分)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/501713。

相关文章

深度解析Java DTO(最新推荐)

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO（DataTransferObject）是一种用于在不同层（如Controller层、Service层）之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO？DTO的核心特点：二、为什么需要DTO？（对比Entity）三、实际应用场景解析
阅读更多...
深度解析Java项目中包和包之间的联系

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次，点赞13次，收藏8次。本文详细介绍了Java分层架构中的几个关键包：DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1
阅读更多...
Java中的雪花算法Snowflake解析与实践技巧

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.
阅读更多...
使用Python绘制3D堆叠条形图全解析

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现：从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景：3D 堆叠图
阅读更多...
深度解析Python装饰器常见用法与进阶技巧

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器（Decorator）是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧
阅读更多...
解析C++11 static_assert及与Boost库的关联从入门到精通

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识：传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决
阅读更多...
全面解析MySQL索引长度限制问题与解决方案

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言：为什么会有索引键长度问题？一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...
深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制（JDK/CGLIB）、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实
阅读更多...
解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》：本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2