@vue/cli-plugin-babel/index.js 中:


api.genCacheConfig('babel-loader', {}, [])

我们看一下 api.genCacheConfig 在文件:@vue/cli-service/lib/PluginAPI.js 中被定义:

Generate a cache identifier from a number of variables

在函数一开始接受 3 个参数:

  • id
  • partialIdentifier
  • configFiles

然后看一下函数的内部:

返回:

  • cacheIdentifier
  • cacheDirectory

genCacheConfig (id, partialIdentifier, configFiles) {
const cacheDirectory = this.resolve(`node_modules/.cache/${id}`)
const variables = {}
const cacheIdentifier = hash(variables)
return { cacheDirectory, cacheIdentifier }
}

我们打印了 cacheDirectory 目录,发现一个目录地址:


/Users/***/node_modules/.cache

我本地的有 4 个文件夹:

  • babel-loader
  • uglifyjs-webpack-plugin
  • eslint-loader
  • vue-loader

我们上面 cli-plugin-babel 就是指向了 babel-loader 的目录:

上面的 hash 用到了:


const hash = require('hash-sum')

/Users/***/node_modules/.cache/babel-loader

首先,babel-loader 是不具备去一个 .cache 目录写入文件的,那到底是谁呢?

还记得我们之前通过 vue inspect --rule js 打印的 babelwebpack 配置吗?


/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/***/node_modules/.cache/babel-loader',
cacheIdentifier: '2f4347b9'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
}

这里面的 use 配置在 babel-loader 之前配置了一个 cache-loader


{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/***/node_modules/.cache/babel-loader',
cacheIdentifier: '2f4347b9'
}
}

cache-loader 到底做什么的呢:

Caches the result of following loaders on disk (default) or in the database

它的使用中有一个示例:

Add this loader in front of other (expensive) loaders to cache the result on disk.

一般它会放置在 use 配置里面,而且是其他 loaders 的前面:


module.exports = {
module: {
rules: [
{
test: /\.ext$/,
use: [
'cache-loader',
...loaders
],
include: path.resolve('src')
}
]
}
}

那其实结果就很清晰了,写文件的就是它:

一开始通过 Set 来创建一个对象,后面还使用了 addhas


var directories = new Set();

它有一个函数 write,接受 3 个参数:

  • key
  • data
  • callback

function write(key, data, callback) {
var dirname = path.dirname(key);
var content = JSON.stringify(data); if (directories.has(dirname)) {
// for performance skip creating directory
fs.writeFile(key, content, 'utf-8', callback);
} else {
mkdirp(dirname, function (mkdirErr) {
if (mkdirErr) {
callback(mkdirErr);
return;
} directories.add(dirname); fs.writeFile(key, content, 'utf-8', callback);
});
}
}

这里创建目录用到了:mkdirp 来创建目录


var mkdirp = require('mkdirp');

然后通过 fs.writeFile 来写文件


var fs = require('fs');
fs.writeFile(key, content, 'utf-8', callback);

来源:https://segmentfault.com/a/1190000016244353

[Vue CLI 3] 插件开发中的 genCacheConfig 细节研究的更多相关文章

  1. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  2. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  3. [Vue CLI 3] 插件开发之 registerCommand 到底做了什么

    首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...

  4. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  5. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  6. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  7. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  8. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  9. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

随机推荐

  1. sscanf linux-c从一个字符串中读进与指定格式相符的数据

    https://www.cnblogs.com/lanjianhappy/p/6861728.html 函数原型: Int sscanf( string str, string fmt, mixed ...

  2. DataSourceUtils(加入线程管理事务)

    第一二见之前的文章: DataSourceUtils(使用C3P0连接池的工具类) 替换第三步: import java.sql.Connection; import java.sql.ResultS ...

  3. poj 2288

    传送门 解题思路 状压dp,记录路径条数,dp[S][i][j]表示状态为S,前一个点是i,再前一个点是j的最大值,然后在开个一样的数组记录方案数,时间复杂度O(2^n*n^2),注意要用long l ...

  4. 深入浅出 Java Concurrency (9): 锁机制 part 4[转]

    本小节介绍锁释放Lock.unlock(). Release/TryRelease unlock操作实际上就调用了AQS的release操作,释放持有的锁. public final boolean ...

  5. mysql中的字符集和校对规则(mysql校对集)

    1.简要说明介绍 字符集和校对规则 字符集是一套符号和编码.校对规则是在字符集内用于比较字符的一套规则. MySql在collation提供较强的支持,oracel在这方面没查到相应的资料. 不同字符 ...

  6. [转] 允许远程用户登录访问mysql的方法

    需要手动增加可以远程访问数据库的用户. 方法一.本地登入mysql,更改 "mysql" 数据库里的 "user" 表里的 "host" 项 ...

  7. 【DM642学习笔记五】FVID驱动模型 API函数

    1.FVID_control 作用:发送一个控制命令到mini_driver 语法: status = FVID_control(fvidChan, cmd, args); 参数: FVID_Hand ...

  8. JS基础之EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...

  9. react-native warn Failed to connect to development server using "adb reverse":

    react-native环境搭建中的问题 本文环境说明:开发环境:window10专业版,目标平台:Android react: , react-native: java: 1.8.0_221 pyt ...

  10. mybatis框架学习:

    一.什么是框架 它是我们软件开发中的一套解决方案,不同的框架解决的是不同的问题 使用框架的好处: 框架封装了很多的细节,使开发者可以使用极简的方式实现功能 大大提高开发效率 二.三层框架 表现层: 用 ...