使用node自动化创建文件及其模板

一，概述

在开发一个组件之前，需要创建组件目录、创建组件文件、初始化组件模板等一系列繁琐又重复的工作，这些其实都可以使用脚本自动化实现。

二，实现

可以在 scripts 目录下写一个 node 脚本实现以上过程，并在 package.json 中添加 scripts 脚本加入到 npm 工作流中：

 "scripts": { 
    "create": "node ./script/new-file.js" }, 

然后编写模板代码：

<template> <div>模板</div> </template> <script> export default { 
    data() { 
    return { 
   }; }, created() { 
   }, computed: { 
   }, methods: { 
   }, }; </script> <style lang="scss" scoped></style> 

自动创建文件的脚本：

const path = require("path"); const fs = require("fs"); const fileSave = require("file-save"); const uppercamelcase = require("uppercamelcase"); const inquirer = require("inquirer"); //组件放置在src/components下，组件名文件夹加一个index.vue文件 //组件的命名规范为大驼峰:MyTest //页面文件放在 src/pages下，页面名文件夹下一个components和index.vue文件 //页面的命名为两个字母短横线连接：my-test const type = new Map([ ["新增组件", "component"], ["新增页面", "page"], ]); // 递归创建目录 同步方法 const mkdirsSync = function (dirname) { 
    if (fs.existsSync(dirname)) { 
    return true; } else { 
    if (mkdirsSync(path.dirname(dirname))) { 
    fs.mkdirSync(dirname); return true; } } }; const build = async () => { 
    const res1 = await inquirer.prompt([ { 
    type: "list", name: "type", message: "请选择你要新建的文件类型？", choices: ["新增组件", "新增页面"], }, ]); const createType = type.get(res1.type); fs.readFile( path.resolve(__dirname, "./template/index.vue"), "utf8", async function (err, data) { 
    if (createType === "component") { 
    //新建组件 const res2 = await inquirer.prompt([ { 
    type: "input", message: "请输入组件名称:", name: "componentName", }, ]); const ComponentName = uppercamelcase(res2.componentName); const componentPath = path.resolve( __dirname, "../src/components", ComponentName ); const files = [{ 
    fileName: "index.vue", content: data, type: "file" }]; files.forEach((file) => { 
    fileSave(path.join(componentPath, file.fileName)) .write(file.content, "utf8") .end("\n"); }); } else { 
    //新建页面 const res3 = await inquirer.prompt([ { 
    type: "input", message: "请输入页面名称:", name: "pageName", }, ]); const componentPath = path.resolve( __dirname, "../src/pages", res3.pageName ); const files = [ { 
    fileName: "componcent", type: "fileBox", }, { 
    fileName: "index.vue", content: data, type: "file" }, ]; files.forEach((file) => { 
    //新增文件夹 if (file.type === "fileBox") { 
    mkdirsSync(path.join(componentPath, file.fileName)); } else { 
    //新增文件 fileSave(path.join(componentPath, file.fileName)) .write(file.content, "utf8") .end("\n"); } }); } } ); }; build(); 

接下来只要npm run create，输入要创建的文件名字，就可以创建基本的具备模板的新文件了。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-nodejs/10964.html