搭建node脚手架（二） 依赖冲突处理，生成项目配置文件

于 2025-09-16 17:48:14 发布
阅读量164 收藏 10
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 前端工程化 前端 node脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42952637/article/details/151761176

依赖冲突处理（conflict-resolve.ts）

操作步骤详解

  1. 依赖清理规则设定
// 精确匹配待删除依赖项
const packageNamesToRemove = [ ... ];
// 前缀匹配待删除依赖项  
const packagePrefixesToRemove = [ ... ];

// 示例说明：
// - 精确匹配项：eslint、prettier、husky 等
// - 前缀匹配项：eslint- 插件、@typescript-eslint/ 等

⚠️ 注意：这些依赖项若存在，可能与 PKG_NAME 内置工具产生冲突，需要移除。

配置文件检查

const checkUselessConfig = (cwd: string): string[] => {
  return [
    ...glob.sync('.eslintrc?...', { cwd }),
    ...glob.sync('.stylelintrc?...', { cwd }), 
    ...glob.sync('.markdownlint...', { cwd }),
    ...glob.sync('.prettierrc?...', { cwd }),
    ...glob.sync('tslint.@(yaml|yml|json)', { cwd }),
    ...glob.sync('.kylerc?...', { cwd })
  ];
};

🔍 功能说明：扫描项目目录，查找以下旧配置文件：

  • 各类 lint 配置（eslint/stylelint/prettier）
  • tslint 相关配置
  • 其他工具配置文件

需重写配置检查

const checkReWriteConfig = (cwd: string) => {
  return glob
    .sync('**/*.ejs', { cwd: path.resolve(__dirname, '../config') })
    .map(name => name.replace(/^_/, '.').replace(/\.ejs$/, ''))
    .filter(filename => fs.existsSync(path.resolve(cwd, filename)));
};

🔄 处理流程：

  1. 从模板目录查找 .ejs 配置文件
  2. 转换为实际配置文件名（如 _eslintrc.ejs → .eslintrc）
  3. 筛选出项目中已存在的配置文件

结果汇总

const willRemovePackage = dependencies.filter(...); // 待移除依赖
const uselessConfig = checkUselessConfig(cwd);     // 待删除配置 
const reWriteConfig = checkReWriteConfig(cwd);     // 待覆盖配置
const willChangeCount = willRemovePackage.length + uselessConfig.length + reWriteConfig.length;

用户确认环节

if (willChangeCount > 0) {
  log.warn(`检测到 ${PKG_NAME} 可能存在配置冲突...`);
  
  const { isOverWrite } = await inquirer.prompt({
    type: 'confirm',
    name: 'isOverWrite',
    message: '是否继续执行？'
  });
  
  if (!isOverWrite) process.exit(0);
}

📌 交互逻辑：

  • 展示待修改内容清单
  • 获取用户确认
  • 拒绝则终止流程

执行清理操作

// 删除旧配置文件
uselessConfig.forEach(name => {
  fs.removeSync(path.resolve(cwd, name));
});

// 清理 package.json
delete pkg.eslintConfig;
delete pkg.eslintIgnore; 
delete pkg.stylelint;

// 移除冲突依赖
willRemovePackage.forEach(name => {
  delete (pkg.dependencies || {})[name];
  delete (pkg.devDependencies || {})[name];
});

// 保存修改
fs.writeFileSync(path.resolve(cwd, 'package.json'), JSON.stringify(pkg, null, 2));

本流程用于确保环境清洁：

  1. 检测冲突配置和依赖
  2. 获取用户授权
  3. 执行清理操作
  4. 避免与新工具产生冲突

完整代码：

import path from 'path';
import fs from 'fs-extra';
import glob from 'glob';
import inquirer from 'inquirer';
import log from './log';
import { PKG_NAME } from './constants';
import type { PKG } from '../types';

// 精确移除依赖
const packageNamesToRemove = [
  '@babel/eslint-parser',
  '@commitlint/cli',
  '@iceworks/spec',
  'babel-eslint',
  'eslint',
  'husky',
  'markdownlint',
  'prettier',
  'stylelint',
  'tslint',
];

// 按前缀移除依赖
const packagePrefixesToRemove = [
  '@commitlint/',
  '@typescript-eslint/',
  'eslint-',
  'stylelint-',
  'markdownlint-',
  'commitlint-',
];

/**
 * 待删除的无用配置
 * @param cwd
 */
const checkUselessConfig = (cwd: string): string[] => {
  return []
    .concat(glob.sync('.eslintrc?(.@(yaml|yml|json))', { cwd }))
    .concat(glob.sync('.stylelintrc?(.@(yaml|yml|json))', { cwd }))
    .concat(glob.sync('.markdownlint@(rc|.@(yaml|yml|jsonc))', { cwd }))
    .concat(
      glob.sync('.prettierrc?(.@(cjs|config.js|config.cjs|yaml|yml|json|json5|toml))', { cwd }),
    )
    .concat(glob.sync('tslint.@(yaml|yml|json)', { cwd }))
    .concat(glob.sync('.kylerc?(.@(yaml|yml|json))', { cwd }));
};

/**
 * 待重写的配置
 * @param cwd
 */
const checkReWriteConfig = (cwd: string) => {
  return glob
    .sync('**/*.ejs', { cwd: path.resolve(__dirname, '../config') })
    .map((name) => name.replace(/^_/, '.').replace(/\.ejs$/, ''))
    .filter((filename) => fs.existsSync(path.resolve(cwd, filename)));
};

export default async (cwd: string, rewriteConfig?: boolean) => {
  const pkgPath = path.resolve(cwd, 'package.json');
  const pkg: PKG = fs.readJSONSync(pkgPath);
  const dependencies = [].concat(
    Object.keys(pkg.dependencies || {}),
    Object.keys(pkg.devDependencies || []),
  );
  const willRemovePackage = dependencies.filter(
    (name) =>
      packageNamesToRemove.includes(name) ||
      packagePrefixesToRemove.some((prefix) => name.startsWith(prefix)),
  );
  const uselessConfig = checkUselessConfig(cwd);
  const reWriteConfig = checkReWriteConfig(cwd);
  const willChangeCount = willRemovePackage.length + uselessConfig.length + reWriteConfig.length;

  // 提示是否移除原配置
  if (willChangeCount > 0) {
    log.warn(`检测到项目中存在可能与 ${PKG_NAME} 冲突的依赖和配置，为保证正常运行将`);

    if (willRemovePackage.length > 0) {
      log.warn('删除以下依赖：');
      log.warn(JSON.stringify(willRemovePackage, null, 2));
    }

    if (uselessConfig.length > 0) {
      log.warn('删除以下配置文件：');
      log.warn(JSON.stringify(uselessConfig, null, 2));
    }

    if (reWriteConfig.length > 0) {
      log.warn('覆盖以下配置文件：');
      log.warn(JSON.stringify(reWriteConfig, null, 2));
    }

    if (typeof rewriteConfig === 'undefined') {
      const { isOverWrite } = await inquirer.prompt({
        type: 'confirm',
        name: 'isOverWrite',
        message: '请确认是否继续：',
      });

      if (!isOverWrite) process.exit(0);
    } else if (!reWriteConfig) {
      process.exit(0);
    }
  }

  // 删除配置文件
  for (const name of uselessConfig) {
    fs.removeSync(path.resolve(cwd, name));
  }

  // 修正 package.json
  delete pkg.eslintConfig;
  delete pkg.eslintIgnore;
  delete pkg.stylelint;
  for (const name of willRemovePackage) {
    delete (pkg.dependencies || {})[name];
    delete (pkg.devDependencies || {})[name];
  }
  fs.writeFileSync(path.resolve(cwd, 'package.json'), JSON.stringify(pkg, null, 2), 'utf8');

  return pkg;
};

EJS 模板引擎

1️⃣ EJS 简介

EJS（Embedded JavaScript）是一种高效的模板引擎，它允许开发者在文本文件（如 HTML 或配置文件）中嵌入 JavaScript 代码，实现动态内容生成。典型应用场景包括：填充用户选项、循环生成列表、条件渲染等。

2️⃣ ejs.render 基础用法

import ejs from 'ejs';

const template = `
Hello <%= name %>!
<% if (age >= 18) { %>
You are an adult.
<% } else { %>
You are a minor.
<% } %>
`;

const data = { name: 'Alice', age: 20 };
const result = ejs.render(template, data);

console.log(result);

输出结果：

Hello Alice!
You are an adult.

语法说明：

  • <%= ... %>：输出表达式值（自动转义）
  • <% ... %>：执行 JavaScript 逻辑（不输出）
  • data：模板渲染时传入的数据对象

3️⃣ 实际应用示例

let content = ejs.render(
  fs.readFileSync(path.resolve(templatePath, name), 'utf8'),
  {
    eslintIgnores: ESLINT_IGNORE_PATTERN,
    stylelintExt: STYLELINT_FILE_EXT,
    stylelintIgnores: STYLELINT_IGNORE_PATTERN,
    markdownLintIgnores: MARKDOWN_LINT_IGNORE_PATTERN,
    ...data, // 合并用户配置选项
  }
);

实现功能：

  1. 读取指定路径的 EJS 模板文件
  2. 注入多类配置数据：
    • ESLint 忽略规则
    • Stylelint 相关配置（文件扩展名和忽略规则）
    • Markdownlint 忽略规则
    • 用户自定义选项（如是否启用 Prettier、Stylelint 等）
  3. 生成最终文件内容：
    • 替换模板中的变量占位符
    • 执行条件判断和循环逻辑

根据模板生成项目配置文件（generate-template.ts）

1️⃣ 核心功能

配置文件生成

  • 根据用户选择（ESLint/Stylelint/Prettier/Markdownlint等）生成对应配置文件
  • 支持生成格式：.eslintrc、.stylelintrc、.prettierrc、.vscode/settings.json等

智能配置合并

  • 当项目存在VSCode配置时自动进行深度合并
  • 采用lodash.mergeWith实现智能合并
  • 特殊处理数组类型配置（如files.exclude/eslint.validate），自动去重

模板化渲染

  • 基于EJS模板引擎动态生成文件内容
  • 自动注入用户选项和预设忽略模式
  • 支持文件名转换规则：_filename → .filename（如_eslintrc.ejs转.eslintrc）

2️⃣ 实现逻辑

模板定位

const templatePath = path.resolve(__dirname, '../config');

模板匹配

  • 根据vscode标识动态选择模板目录
const templates = glob.sync(`${vscode ? '_vscode' : '**'}/*.ejs`, { cwd: templatePath });

模板渲染

ejs.render(fs.readFileSync(templatePath + name), {
  eslintIgnores,
  stylelintExt,
  stylelintIgnores,
  markdownLintIgnores,
  ...data
});

配置合并处理

if (/^_vscode/.test(name)) {
  content = mergeVSCodeConfig(filepath, content);
}

文件写入

fs.outputFileSync(filepath, content, 'utf8');

3️⃣ 核心优势

◾ 模板化架构：通过.ejs模板实现配置灵活扩展
◾ 安全合并机制：智能保留现有VSCode配置
◾ 自动命名转换：_前缀文件自动转为.配置文件
◾ 智能规则注入：自动集成各lint工具的忽略规则

基于模板引擎的智能配置生成器，可安全合并现有VSCode配置，避免覆盖用户自定义设置。

完整代码：

import path from 'path'; 
import fs from 'fs-extra'; 
import _ from 'lodash';
import glob from 'glob'; 
import ejs from 'ejs'; /
import {
  ESLINT_IGNORE_PATTERN, // ESLint 忽略文件模式
  STYLELINT_FILE_EXT, // Stylelint 支持的文件扩展名
  STYLELINT_IGNORE_PATTERN, // Stylelint 忽略文件模式
  MARKDOWN_LINT_IGNORE_PATTERN, // Markdownlint 忽略文件模式
} from './constants';

/**
 * VSCode 配置合并
 * 将新生成的 VSCode 配置与现有配置进行智能合并
 * @param filepath 目标配置文件路径
 * @param content 新生成的配置内容
 * @returns 合并后的配置内容
 */
const mergeVSCodeConfig = (filepath: string, content: string) => {
  // 如果目标文件不存在，直接返回新内容
  if (!fs.existsSync(filepath)) return content;

  try {
    // 读取现有配置文件
    const targetData = fs.readJSONSync(filepath);
    // 解析新生成的配置内容
    const sourceData = JSON.parse(content);
    
    // 使用 lodash 的 mergeWith 进行深度合并
    return JSON.stringify(
      _.mergeWith(targetData, sourceData, (target, source) => {
        // 如果两个值都是数组，则合并并去重
        if (Array.isArray(target) && Array.isArray(source)) {
          return [...new Set(source.concat(target))];
        }
      }),
      null,
      2, // 缩进 2 个空格
    );
  } catch (e) {
    // 解析失败时返回空字符串
    return '';
  }
};

/**
 * 生成配置文件模板
 * 根据用户选择的配置选项生成相应的配置文件
 * @param cwd 当前工作目录
 * @param data 配置数据（用户选择的各种选项）
 * @param vscode 是否只生成 VSCode 相关配置，默认为 false
 */
export default (cwd: string, data: Record<string, any>, vscode?: boolean) => {
  // 模板文件所在目录
  const templatePath = path.resolve(__dirname, '../config');
  
  // 根据 vscode 参数决定匹配的模板文件
  // 如果 vscode 为 true，只匹配 _vscode 目录下的模板
  // 否则匹配所有目录下的 .ejs 模板文件
  const templates = glob.sync(`${vscode ? '_vscode' : '**'}/*.ejs`, { cwd: templatePath });
  
  // 遍历所有模板文件
  for (const name of templates) {
    // 生成目标文件路径
    // 移除 .ejs 扩展名，将 _ 开头的文件名改为 . 开头
    const filepath = path.resolve(cwd, name.replace(/\.ejs$/, '').replace(/^_/, '.'));
    
    // 使用 EJS 模板引擎渲染文件内容
    let content = ejs.render(fs.readFileSync(path.resolve(templatePath, name), 'utf8'), {
      eslintIgnores: ESLINT_IGNORE_PATTERN, // ESLint 忽略模式
      stylelintExt: STYLELINT_FILE_EXT, // Stylelint 文件扩展名
      stylelintIgnores: STYLELINT_IGNORE_PATTERN, // Stylelint 忽略模式
      markdownLintIgnores: MARKDOWN_LINT_IGNORE_PATTERN, // Markdownlint 忽略模式
      ...data, // 用户选择的配置选项
    });

    // 如果是 VSCode 配置文件，需要与现有配置合并
    if (/^_vscode/.test(name)) {
      content = mergeVSCodeConfig(filepath, content);
    }

    // 跳过空文件
    if (!content.trim()) continue;

    // 写入文件到目标路径
    fs.outputFileSync(filepath, content, 'utf8');
  }
};
Vue CLI 4 脚手架搭建项目全流程详解
AI架构全栈开发实战笔记
06-01 599
本文旨在提供一个全面的指南，帮助开发者掌握Vue CLI 4的使用方法，理解其核心概念和工作原理，并能够高效地搭建和管理Vue.js项目。核心概念与联系：介绍Vue CLI的基本概念和架构安装与初始化：详细讲解安装和项目创建过程配置详解：深入分析各种配置选项插件系统：探索Vue CLI强大的插件机制项目实战：通过实际案例演示完整流程构建与部署：讲解项目构建和发布的最佳实践Vue CLI：Vue.js官方提供的标准工具链，用于快速搭建Vue项目脚手架。
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
weixin_43822185的博客
11-14 1335
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
Vue脚手架搭建项目+基础知识
2201_75550069的博客
07-05 1560
本文介绍了Vue项目开发的关键技术点：1. 项目搭建流程，包括使用Vue CLI创建项目、项目结构解析、端口配置等；2. Vue基础语法，涵盖文本插值、属性/事件/双向绑定、条件渲染等核心功能；3. Axios网络请求的实现与跨域解决方案；4. Vue-Router路由配置，包括基本路由、编程式导航和嵌套路由；5. Vuex状态管理的应用，展示共享数据管理和异步操作处理；6. TypeScript基础，包括类型标注、接口、类等特性。文章通过具体代码示例，系统性地讲解了Vue生态中这些重要技术的使用方法。
搭建node脚手架（一）
最新发布
qq_42952637的博客
09-16 338
搭建node脚手架（一）
yeoman生成自己项目文件脚手架(react)
zeromike
07-29 336
原文和代码请戳这里   准备做React+Backbone的集成开发，同事之前已经做了自定义Backbone的脚手架，我今天来做React的。 准备工作，安装Node,yeoman就不多说了，什么？不会？你做什么自定义脚手架啊，先自行google去吧 1.安装目录 我的目录是：home/mike/mywork/study/gitcode/ 2.安装generator 安装:在命令行输入...
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
m0_61486963的博客
09-12 3390
从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
Vue_day1 项目模板 node脚手架 安装第三方插件 js文件
weixin_44999932的博客
05-21 278
vue项目搭建 目录结构 vue脚手架的使用 vue第三方插件，js的定义方式，导入js文件的方法
Vue 3 脚手架搭建
Dily_Su的博客
05-18 3010
手把手带你创建属于自己的 vue3 脚手架 技术栈：vite、vue3、typescript、pinia、axios、eslint、prettier、element-plus、unplugin-auto-import、unplugin-vue-components、unplugin-icons
react脚手架创建项目
qq_41051239的博客
02-22 2244
在mockData.js中引入mockjs，并写模拟的返回数据，第一个参数是接口，第二个是请求类型，第三个是一个函数，接收请求参数并处理之后返回数据。代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题，提前避免错误发生。冲突情况，记得检查package.json和.eslintrc.js文件内容是否有引入版本不同导致的冲突情况。可以极大的提高项目中多人协作开发时的效率、代码的可读性以及可维护性。命令将配置完全暴露出来，但这是一个不可逆的操作，复杂的。
Yeoman - 搭建自己的脚手架
Moon Star
05-12 1143
引言 随着前端工程化的理念不断深入，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中大家最熟悉的就是create-react-app和vue-cli，它们可以帮助我们初始化配置、生成项目结构、自动安装依赖，最后我们一行指令即可运行项目开始开发，或者进行项目构建（build）。 这些脚手架提供的都是普遍意义上的最佳实践，但是我在开发中发现，随着业务的不断发展，必然会出现需要针对业务开发的实际情况来进行调整。例如： 通过调整插件与配置实现 Webpack 打包性能优化后 删除脚手架构
自己搭建脚手架cli，初始化项目
07-14
在软件开发中，脚手架（Scaffold）是一种自动化工具，它能够快速生成项目的基本结构，包括目录、文件、配置等，帮助开发者快速启动新项目。CLI（Command Line Interface，命令行界面）则是脚手架的一种常见实现方式...
基于vue脚手架20详细讲解项目搭建
08-09
Vue CLI（脚手架）2.0 提供了一套快速搭建项目环境的工具，简化了项目的初始化工作，让开发者能够更专注于业务逻辑的实现。本文将详细介绍如何基于Vue CLI 2.0进行项目搭建，包括插件的使用和可能遇到的问题。 首先...
SpringBoot返回前端时间格式化处理
LuckyTHP
09-15 163
转至：https://blog.csdn.net/weixin_44906271/article/details/105772304。在对应实体类的时间字段上面加上如下注解，那么返回的时间格式就自动转换成了需要的格式了。在用Layui做写后台页面的时候，用layui提供的一个工具转化也是可以的。这样操作会比较麻烦，除了每个时间上都要加方法转换外，也降低了代码的可阅读行。除了在前台转化转换之后，其实还可以在后台转换好时间格式，再返回给前台。这时返回的时间格式就可以直接用了。
前端适配IE浏览器
Front小思的博客
09-15 537
平常开发中会遇到一些客户的电脑的浏览器还是使用低版本的IE浏览器所以开发还得去适配一些IE浏览器！
SpringMVC架构解析：从入门到精通（1）
qq_47896523的博客
09-14 581
本文介绍了MVC架构模式及其在SpringMVC框架中的实现。MVC将应用分为模型（Model）、视图（View）和控制器（Controller），具有低耦合、高复用性等优点。SpringMVC通过DispatcherServlet作为前端控制器，简化了传统Servlet开发，提供了自动数据绑定、IoC容器管理等功能。文章详细讲解了SpringMVC的配置流程、请求处理机制、参数获取方式、域对象共享数据以及视图解析过程。最后介绍了RESTful风格的URL设计，包括GET、POST、PUT、DELETE等H
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
muchu_CSDN的博客
09-11 1067
此项目选用的脚手架工程是人人开源选择的是下图标红的renren-fast作为后端，renren-fast-vue作为前端克隆上述两个项目。
前端设计模式全解（23 种）
用于分享前端相关的知识和架构体系
09-12 1051
前端设计模式概述 设计模式是解决常见软件设计问题的可复用方案。在前端开发中，23种经典模式（由GoF提出）可提升代码质量。主要分为三类： 创建型模式：控制对象实例化，如单例模式（全局状态管理）、工厂模式（环境适配创建）、建造者模式（组件渐进构建） 结构型模式：处理对象组合，如适配器（接口兼容）、装饰器（功能扩展）、代理（访问控制） 行为型模式：管理对象交互，如责任链（请求处理链）、命令模式（操作封装） 典型应用包括： 状态管理（单例） 组件构建（工厂/建造者） API封装（外观/代理） 功能扩展（装饰器）
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 681
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值