[Vue CLI 3] 插件开发中的 genCacheConfig 细节研究
在 @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
打印的 babel
的 webpack
配置吗?
/* 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
来创建一个对象
,后面还使用了add
和has
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 细节研究的更多相关文章
- Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)
1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
- [Vue CLI 3] 插件开发之 registerCommand 到底做了什么
首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
随机推荐
- sscanf linux-c从一个字符串中读进与指定格式相符的数据
https://www.cnblogs.com/lanjianhappy/p/6861728.html 函数原型: Int sscanf( string str, string fmt, mixed ...
- DataSourceUtils(加入线程管理事务)
第一二见之前的文章: DataSourceUtils(使用C3P0连接池的工具类) 替换第三步: import java.sql.Connection; import java.sql.ResultS ...
- poj 2288
传送门 解题思路 状压dp,记录路径条数,dp[S][i][j]表示状态为S,前一个点是i,再前一个点是j的最大值,然后在开个一样的数组记录方案数,时间复杂度O(2^n*n^2),注意要用long l ...
- 深入浅出 Java Concurrency (9): 锁机制 part 4[转]
本小节介绍锁释放Lock.unlock(). Release/TryRelease unlock操作实际上就调用了AQS的release操作,释放持有的锁. public final boolean ...
- mysql中的字符集和校对规则(mysql校对集)
1.简要说明介绍 字符集和校对规则 字符集是一套符号和编码.校对规则是在字符集内用于比较字符的一套规则. MySql在collation提供较强的支持,oracel在这方面没查到相应的资料. 不同字符 ...
- [转] 允许远程用户登录访问mysql的方法
需要手动增加可以远程访问数据库的用户. 方法一.本地登入mysql,更改 "mysql" 数据库里的 "user" 表里的 "host" 项 ...
- 【DM642学习笔记五】FVID驱动模型 API函数
1.FVID_control 作用:发送一个控制命令到mini_driver 语法: status = FVID_control(fvidChan, cmd, args); 参数: FVID_Hand ...
- JS基础之EL表达式
一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...
- 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 ...
- mybatis框架学习:
一.什么是框架 它是我们软件开发中的一套解决方案,不同的框架解决的是不同的问题 使用框架的好处: 框架封装了很多的细节,使开发者可以使用极简的方式实现功能 大大提高开发效率 二.三层框架 表现层: 用 ...