更新Vue项目package.json文件方式

 更新时间:2025年10月25日 09:57:12   作者:Qredsun  
文章讨论了由于历史原因,一些已弃用的依赖没有在package.json中移除,导致构建时间过长的问题,解决方法是使用社区工具自动生成使用`nodegenerate-package.js`脚本,根据已安装的依赖进行重建运行

背景

因为历史原因,导致有些依赖已经弃用,但没有在package.json中移除,导致在进行构建时间过长。

解决方法

自动生成

npm init -y     # 先生成基础 package.json(如果没有的话)
npm install --package-lock-only  # 确保 lock 文件是最新的
npx depcheck    # 可选,查看未使用的依赖

使用社区工具,完全重建

npx npm-dedupe
npx modclean   # 清理无用文件(可选)

运行脚本node generate-package.js,根据已安装依赖生成(推荐)

const fs = require('fs');
const path = require('path');
const child_process = require('child_process');

const nodeModulesPath = path.resolve('node_modules');
const allDeps = fs.readdirSync(nodeModulesPath).filter(name => name !== '.bin');
const dependencies = {};

allDeps.forEach(pkg => {
  try {
    const pkgPath = path.join(nodeModulesPath, pkg, 'package.json');
    const pkgJson = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
    dependencies[pkg] = pkgJson.version;
  } catch (e) {
    console.warn(`跳过无效包: ${pkg}`);
  }
});

const newPkgJson = {
  name: "recovered-project",
  version: "1.0.0",
  description: "",
  main: "index.js",
  scripts: {},
  dependencies,
};

fs.writeFileSync('package.recovered.json', JSON.stringify(newPkgJson, null, 2));
console.log('已生成 package.recovered.json');

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vuex状态管理模式

    详解vuex状态管理模式

    这篇文章主要介绍了详解vuex状态管理模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue项目的创建的步骤(图文教程)

    vue项目的创建的步骤(图文教程)

    本文主要介绍了vue项目的创建的步骤(图文教程),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 基于vue.js路由参数的实例讲解——简单易懂

    基于vue.js路由参数的实例讲解——简单易懂

    下面小编就为大家带来一篇基于vue.js路由参数的实例讲解——简单易懂。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 移动端Vue2.x Picker的全局调用实现

    移动端Vue2.x Picker的全局调用实现

    这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • vue3响应式原理之Ref用法及说明

    vue3响应式原理之Ref用法及说明

    这篇文章主要介绍了vue3响应式原理之Ref用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue与react详细

    vue与react详细

    react在中后台项目中由于在处理复杂的业务逻辑或组件的复用问题比vue优雅而被人认可,但也更需要团队技术整体比较给力,领头大佬的设计与把关能力要更优秀,因此开发成本更大,下面文章就来详细介绍,需要的朋友可以参考下
    2021-09-09
  • vue中插槽(slot)几种类型的使用方法

    vue中插槽(slot)几种类型的使用方法

    本文主要介绍了vue中插槽(slot)几种类型的使用方法,主要分三种,默认插槽,具名插槽,作用域插槽,下面就来一起介绍一下,感兴趣的可以了解一下
    2024-03-03
  • webpack+vue-cli项目中引入外部非模块格式js的方法

    webpack+vue-cli项目中引入外部非模块格式js的方法

    今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue组件中使用防抖函数的方式

    vue组件中使用防抖函数的方式

    这篇文章主要介绍了vue组件中使用防抖函数的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    详解关于表格合并span-method方法的补充(表格数据由后台动态返回)

    这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05

最新评论