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。

相关文章

Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
Java图片压缩三种高效压缩方案详细解析

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,：本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点：适用场景：二、JPEG质量参数压缩关键技术：压缩效果对比
阅读更多...
Java调用C++动态库超详细步骤讲解(附源码)

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,：本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步：动态库生成（vs2017+qt5.12.10）第二步：Java调用C++
阅读更多...
关于WebSocket协议状态码解析

关于WebSocket协议状态码解析

《关于WebSocket协议状态码解析》：本文主要介绍关于WebSocket协议状态码的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录WebSocket协议状态码解析1. 引言2. WebSocket协议状态码概述3. WebSocket协议状态码详解3
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
Oracle数据库常见字段类型大全以及超详细解析

Oracle数据库常见字段类型大全以及超详细解析

《Oracle数据库常见字段类型大全以及超详细解析》在Oracle数据库中查询特定表的字段个数通常需要使用SQL语句来完成,：本文主要介绍Oracle数据库常见字段类型大全以及超详细解析,文中通过... 目录前言一、字符类型（Character）1、CHAR：定长字符数据类型2、VARCHAR2：变长字符数
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...
Python将博客内容html导出为Markdown格式

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞？二、准备如何搞？三、说搞咱就搞！抓取文章提取内容构建html转存markdown
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2