node.js输入项目目录结构并展示

简介: node.js输入项目目录结构并展示
const rootDir = path.resolve(__dirname);
let dirsStr = '';
const createDirTree = (dir, skip) => {
  const recur = (curDir) => {
    fs.readdirSync(curDir, { withFileTypes: true }).forEach((value) => {
      if (skip.includes(value.name)) return;
      const childPath = path.join(curDir, value.name);
      const depths = childPath.replace(rootDir, '').split(path.sep).filter(Boolean).length;
      const isDirectory = value.isDirectory();
      const prefix = `${'| '.repeat(depths - 1)}${isDirectory ? '+' : ''}-- `;
      console.log(`${prefix}${value.name}`);
      dirsStr += `${prefix}${value.name}\n`
      if (isDirectory) {
        recur(path.join(curDir, value.name));
      }
    });
  }
  recur(dir);
  const dirJson = { dirsStr: '`' + `${dirsStr}` + '`' }
  fs.writeFile('./src/Mock/dirs.json',JSON.stringify(dirJson) , function (err) { })
}
createDirTree(rootDir, ["node_modules", ".vscode", ".git", ".next", "_next"])

在html展示时,替换换行符为br

dirStr.value = dirs.dirsStr.replace(/(\n|\r|\r\n|↵)/g, '<br/>')

将字符串中的空格符替换成HTML中正确显示连续空格的&nbsp;转义字符

const text = 'Hello\s\s\sWorld\s2021'
text.replace(/\s/g, '&nbsp;');
相关文章
|
4天前
|
数据采集 前端开发 JavaScript
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
这篇文章介绍了作者在学习React和Nest时受到大佬imsyy项目DailyHot的启发,基于React开发了一个项目,并因为这个项目获得了少量流量而进行了优化。作者随后因为想要优化SEO和深入学习Next.js14,决定重构这个项目。文章详细介绍了项目的信息、特性、演示图、运行环境、Vercel本地部署步骤以及责任声明。作者还感谢了为本项目提供支持与灵感的项目,并承诺会记录下开发过程中遇到的问题及解决方法以帮助他人。
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的
|
1天前
|
JavaScript
node项目的建立
该文档介绍了如何建立一个Node.js项目,首先通过`npm init -y`进行项目初始化,然后安装Express `npm i express@4.17.1`。在`app.js`中设置服务器监听8080端口。接着,为解决跨域问题,安装CORS `npm i cors@2.8.5`,并在`app.js`中启用。项目包含用户路由,新建路由文件并导入到`app.js`,通过Postman测试验证。最后,将路由处理逻辑抽离到`router_handler/user.js`,在路由模块中引入并调用处理函数。
10 1
node项目的建立
|
8天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
9天前
|
JavaScript Unix Shell
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
#! /usr/bin/env node 命令与 npm link 建立项目间软连接(一)
12 0
|
9天前
countup.js包实现数字滚动-大屏项目
countup.js包实现数字滚动-大屏项目
11 1
|
10天前
|
XML JavaScript 前端开发
【JavaScript】实战训练小项目-WebAPI
【JavaScript】实战训练小项目-WebAPI
15 1
|
10天前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
35 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
10天前
|
监控 JavaScript 前端开发
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript项目中的渐进式采用
【4月更文挑战第30天】TypeScript是JavaScript的超集,引入静态类型、接口等特性,提升代码安全性和可读性。在JavaScript项目中采用TypeScript可享受类型安全、社区支持及优秀工具集成等优势。渐进式采用策略包括评估项目现状、逐步引入新旧模块、编写类型定义文件、配置编译选项和编写测试用例,以提高项目质量和效率。
|
10天前
|
JavaScript 前端开发 开发工具
【TypeScript 技术专栏】使用 TypeScript 重构 JavaScript 项目
【4月更文挑战第30天】TypeScript 在前端开发中日益流行,因其静态类型检查、增强代码可读性和更好的工具支持。本文讨论如何用 TypeScript 重构 JavaScript 项目,包括评估项目、安装 TypeScript 工具、逐步添加类型注解、处理兼容性问题以及解决重构中遇到的问题。重构后,代码质量、团队协作和可维护性均得到提升。通过实例分析,文章为 TypeScript 重构提供指导,助力构建更可靠的前端应用。
|
10天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)