fs-extra实现yarn create tlist创建示例详解

 更新时间:2023年01月11日 08:51:00   作者:小鑫同学  
这篇文章主要为大家介绍了fs-extra实现yarn create tlist创建示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

1.引言

这一篇我们翻版一下 create-vite,将以后整理的项目模板集中管理,方便在需要的时候快速创建使用~

2. 利用fs-extra实现"yarn create tlist"创建项目

资源拷贝我们采用fs-extra模块实现~

2.1 模板资源拷贝:

在模板资源拷贝时部分文件是需要我们特殊处理的,所以这部分文件在资源拷贝时就暂时过滤掉,fs-extra模块中的copySync就提供了过滤文件的功能~

路径匹配的时候我们可以使用path模块中的parse函数转为对象后可以更好的操作~

export const fileIgnore = ['package.json', '_gitignore'];
fsExtra.copySync(templateDir, targetDir, {
  filter: (src, dest) => {
    return !fileIgnore.find(
      (f) => f === `${path.parse(src).name}${path.parse(src).ext}`
    );
  },
});

2.2 文本文件拷贝:

_gitignore文件需要再输出时进行重命名操作,但没有找到可以直接实现重命名的函数,所以就通过分别读写两步实现。普通文本文件使用fs-extra模块中的readFileSync读取,在输出到新文件名的文件中~

const gitignoreInfo = fsExtra.readFileSync(
  path.resolve(templateDir, "_gitignore")
);
fsExtra.outputFile(path.join(root, ".gitignore"), gitignoreInfo);

2.3 JSON 文件拷贝:

package.json 读取后我们需要重写内容后再输出,fs-extra模块中的readJsonSync函数可以直接读取为 JSON 对象,我们在修改对象后再次通过outputJSONSync输出 JSON 对象即可,在outputJSONSync提供的选项中指定spaces=2输出非在一行的 JSON 文件~

const pkg = fsExtra.readJsonSync(path.resolve(templateDir, "package.json"));
pkg.name = packageName || getProjectName();
fsExtra.outputJSONSync(path.join(root, "package.json"), pkg, {
  spaces: 2,
});

3. 总结

"yarn create tlist"的主要逻辑除去参数的收集以外就是模板的拷贝两块了,这里通过利用fs-extra实现了模板拷贝,fs-extra函数的支持还是挺不错的,拷贝文件还考虑到了支持过滤的功能,挺不错~

本文项目已推送至GitHub:

git clone git@github.com:OSpoon/create-tlist.git

以上就是fs-extra实现yarn create tlist创建示例详解的详细内容,更多关于fs-extra创建yarn create tlist项目的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript严格模式use strict的介绍

    JavaScript严格模式use strict的介绍

    这篇文章主要介绍了JavaScript严格模式use strict,严格模式是JavaScript中的一种限制性更强的变种方式。严格模式并不是JavaScript中的子集,它在语义上与正常的代码有明显的差异,下面我们就一起来学习该内容吧,需要的朋友也可以参考一下
    2021-12-12
  • WebAssembly增强前端应用技巧详解

    WebAssembly增强前端应用技巧详解

    这篇文章主要为大家介绍了WebAssembly增强前端应用技巧示例详解,<BR>有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 微信小程序报错:this.setData is not a function的解决办法

    微信小程序报错:this.setData is not a function的解决办法

    这篇文章主要介绍了微信小程序报错:this.setData is not a function的解决办法的相关资料,希望通过本文能帮助到大家解决这样类似的问题,需要的朋友可以参考下
    2017-09-09
  • quickjs 封装 JavaScript 沙箱详情

    quickjs 封装 JavaScript 沙箱详情

    这篇文章主要介绍了 quickjs 封装 JavaScript 沙箱,在前文 JavaScript 沙箱探索 中声明了沙箱的接口,并且给出了一些简单的执行任意第三方 js 脚本的代码,但并未实现完整的 IJavaScriptShadowbox,下面便讲一下如何基于 quickjs 实现,需要的朋友可以参考一下
    2021-10-10
  • Javascript实现的分页函数

    Javascript实现的分页函数

    Javascript实现的分页函数...
    2006-12-12
  • javascript 操作cookies详解及实例

    javascript 操作cookies详解及实例

    这篇文章主要介绍了javascript 操作cookies详解及实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • 前端 JavaScript运行原理

    前端 JavaScript运行原理

    这篇文章主要介绍了前端 JavaScript运行原理,JavaScript引擎是一个计算机程序,它的主要作用是JavaScript运行时将源码编译为机器码。每个主流Web浏览器都有自己的JavaScript引擎,它通常由web浏览器供应商开发,接下来一起来看看文章的详细内容吧
    2021-10-10
  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解

    这篇文章主要介绍了微信小程序本地缓存数据增删改查实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • 微信小程序 http请求的session管理

    微信小程序 http请求的session管理

    这篇文章主要介绍了微信小程序 http请求的session管理的相关资料,需要的朋友可以参考下
    2017-06-06
  • vue框架通用化解决个性化文字换行问题实例详解

    vue框架通用化解决个性化文字换行问题实例详解

    这篇文章主要为大家介绍了通用化解决个性化文字换行问题实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论