Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue-cli ui 里的依赖最新版本列表怎么来的?

vue-cli ui 里的依赖最新版本列表怎么来的?

作者头像
windseek
发布于 2020-07-02 02:54:16
发布于 2020-07-02 02:54:16
44100
代码可运行
举报
文章被收录于专栏:杨龙飞前端杨龙飞前端
运行总次数:0
代码可运行

首先看下vue-cli的依赖列表:

这些最新的依赖猜测是通过npm命令行,或者npm的一个地址获取到的

  通过npm命令行的方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const spawn = require('cross-spawn');
var result = spawn.sync('npm', ['view', 'react', 'version']);
console.log("result: " + result.output[1].toString( 'utf-8', 0, result.output[1].length ));

  通过npm的一个地址请求获取的如下:

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const rp = require('request-promise');
const plugins = require('./plugin');
let start = +new Date();
console.log(plugins.length);
const getLatestVersion = async() => {
    let latestArr = [];
    for(var i = 0; i < 10; i++) {
        var url = 'https://registry.npmjs.org//' + plugins[i];
        result = await rp(url);
        if(result) {
            let obj = JSON.parse(result) || {};
            let lastVersion = JSON.parse(result)['dist-tags']['latest']
            latestArr.push(result);
        }
    }
    return latestArr
}

getLatestVersion().then(data => {
    let end = +new Date();
    console.log('处理结果是:' + data);
    console.log('处理这些请求一共花了:' + (end - start) / 1000 + '秒');
})

 plungin.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var plugin = [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/polyfill",
    "@babel/runtime",
    "file-loader",
    "html-loader",
    "html-webpack-plugin",
    "imports-loader",
    "json-loader",
    "less",
    "less-loader",
    "sass-loader",
    "style-loader",
    "stylus",
    "stylus-loader",
    "url-loader",
    "webpack",
    "webpack-bundle-analyzer",
    "webpack-dev-middleware",
    "webpack-dev-server",
    "webpack-hot-middleware",
    "webpack-merge"]
    module.exports = plugin;

  最终也能得到一个最新版本列表

但是会发现速度很慢

看下vue-cli里怎么做的吧

在/usr/local/share/.config/yarn/global/node_modules/@vue/cli-ui/apollo-server/connectors/dependencies.js里

在/usr/local/share/.config/yarn/global/node_modules/@vue/cli/lib/util/ProjectPackageManager.js里

而且还使用LCU做网络缓存

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue-Cli优化编译速度
Vue-Cli脚手架会有webpack的很多默认行为,因此我们得知道基于Vue-Cli的项目,当前的webpack都配置了啥,然后才能做针对性的分析与优化。
码客说
2022/09/27
3.8K0
Vue-Cli优化编译速度
Vue-cli教程
一、安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况。出现版
用户1212940
2018/01/23
2.1K0
Vue-cli教程
Vue CLI 2.x搭建vue,目录最全分析
安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用):
王念博客
2019/07/25
1.3K0
vue-cli 搭建
安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10。如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。
小蔚
2019/09/11
1.5K0
Vue 脚手架项目分析
babel-preset-env是一个新的预设,可以让你指定一个环境并自动使能需要的插件。 支持拥有超过1%市场份额的浏览器
deep_sadness
2018/08/30
1.8K0
Vue 脚手架项目分析
Create React App 源码揭秘
文章首发于@careteen/create-react-app,转载请注明来源即可。
Careteen
2022/02/14
3.8K0
Create React App 源码揭秘
vue-cli 脚手架中 webpack 配置基础文件详解
vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料。
前端教程
2018/07/27
1.4K0
一张图教你快速玩转vue-cli3
本文系统的梳理了vue-cli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点:
徐小夕
2019/07/09
3.2K0
一张图教你快速玩转vue-cli3
【webpack】从vue-cli 2x 到 3x 迁移与实践
左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了webpack配置
树酱
2020/07/03
1.1K0
vue-cli 解决白屏、兼容、压缩及清除console
描述 npm run build打包后,生成 dist文件夹。从该文件夹打开 dist/index.html页面,发现页面空白,且控制台报错。原因是路径配置有问题。方案根目录打开/新建 vue.config.js,配置路径:
流眸
2019/08/12
4.7K0
webpack 基础知识整理
webpack是一个 模块打包工具,支持所有的打包语法,比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的,发展到现在,已经可以打包很多种文件类型,比如 css、img 。
神葳
2021/01/22
1.4K0
webpack配置优化,让你的构建速度飞起
越来越多的项目使用webpack5来构建项目了,今天给大家带来最前沿的webpack5配置,让我们代码在编译/运行时性能更好~
gogo2027
2022/10/03
2.5K0
Vue学习笔记
Npm依赖于Node.js,直接下载安装,并配置环境变量 由于个人比较习惯使用 shift+右键 唤起powershell来执行命令,默认powershell不允许执行脚本文件,需要解除此安全策略
WindRunnerMax
2022/05/06
1.2K0
Vue学习笔记
webpack5学习笔记
assetModuleFilename: 'images/contenthash.png'
代码哈士奇
2022/01/26
2.7K0
从零开始搭建Vue工程
dist目录存放编译后的资源 src存放源码文件 运行命令 npm init -y
切图仔
2022/09/08
8880
从零开始搭建Vue工程
分分钟清除项目中无用的console.log代码
说起console.log调试,不用多说,那是非常的好用,开发中帮助我们解决了不少Bug。我们经常能在开发环境中看见这一坨一坨的console调试。但是生产环境是绝不对不允许出现console信息代码的。你还在手动一个一个删除吗,那得多累啊!
童欧巴
2021/08/20
3.3K0
分分钟清除项目中无用的console.log代码
使用Webpack5创建Vue2项目及优化
之前我们大多都是用Vue-Cli来创建项目,但是Vue-Cli已经停止更新了,并且Vue-Cli相当于一堆插件的集合体,我们想替换以下,或者想根据我们的项目优化以下,提升编译的性能,这时候可以自己用Webpack来配置项目。
码客说
2022/09/27
3.1K0
使用Webpack5创建Vue2项目及优化
【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错
LonelySnowman
2023/01/17
2.4K0
【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇
vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── pro
用户1197315
2018/01/22
1.6K0
【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇
所谓高级配置其实就是进行 Webpack 优化,让我们代码在编译/运行时性能更好~
LonelySnowman
2023/01/19
3.4K0
【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇
相关推荐
Vue-Cli优化编译速度
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验