Автоматизация создания файлов в вашем JS-приложении

Начиная новый проект, вы не хотите тратить время на повторение себя. Вот тут и приходит на помощь библиотека Chokidar — она позволяет автоматизировать создание кода и поддерживать согласованные рекомендации с вашими соавторами.

Позвольте мне рассказать вам, как!

Что такое Chokidar ?
Chokidar — это библиотека Node.js, которая позволяет отслеживать изменения в определенных файлах, целых каталогах или даже во всем дереве каталогов. При обнаружении изменения Chokidar генерирует событие с вашим пользовательским событием.

1 — Первый шаг — это импорт модуля FS, этот модуль позволяет создавать, удалять и изменять файлы и каталоги. После того, как вы импортировали FS, вы можете создать вспомогательные функции, чтобы упростить работу с ними.

const chokidar = require("chokidar");
const fs = require("fs");

// Detect if a file exist
const fileExists = (path) => (file) => fs.existsSync(`${path}/${file}`);

// Create a file with a content on a path
const writeToPath = (path) => (file, content) => {
  const filePath = `${path}/${file}`;

  fs.writeFile(filePath, content, (err) => {
    if (err) throw err;
    console.log("file Created : ", filePath);
    return true;
  });
};

2 — Второй шаг, давайте создадим файл шаблонов! Это будет содержимое, имя и расширение для каждого из файлов, которые вы хотите сгенерировать.

// Content of each files in a object
const templates = {
  index: (name) =>
    `import React from 'react';
    const ${name} = ({ props }) => {
return (
      <h1 className="${name}">
         ${name} 
      </h1>
  )
};
export default ${name};`
}
// Reference between the content and the name of the file with the extension
const files = {
    index: "index.js",
  };

export { files , templates }

3 — Третий шаг Просмотр нужного каталога с помощью Chokidar.
Chokidar имеет множество различных событий и параметров для просмотра файлов. Я приглашаю вас прочитать документацию https://github.com/paulmillr/chokidar для более подробного объяснения его возможностей.
Однако основными событиями, с которыми вы будете работать, являются: add, addDir, change, unlink и unlinkdir.

Приведенный ниже код будет отслеживать путь «src/views/», и если создается папка «addDir», активируйте функцию ниже.

const watcher = chokidar.watch("src/Views/*", { ignored: /node_modules/ }).on("addDir", (path, event) => {
  
// Get the name of the folder created from the "path" variable 
  let name = path.replace(/.*\/Views\//, "");
  if (name.includes("Views") || name.includes("src") || name.includes("/")) {
    name = name.replace("/", "").replace("Views", "").replace("src", "").replace(/\\/g, "").replace(/\\\//g, "");
  }


  if (!name.includes("/")) {
    // Every time you launch the watcher it will recreate the files 
    // so we will look if they exist or not
    const toFileMissingBool = (file) => !fileExists(path)(file);
    const checkAllMissing = (acc, cur) => acc && cur;
    const noneExist = Object.values(files).map(toFileMissingBool).reduce(checkAllMissing);

    if (noneExist) {
     // create every file in the "files" variables
     const writeFile = writeToPath(path);
      Object.entries(files).forEach(([type, fileName]) => {
        writeFile(fileName, templates[type](name));
      });
    }


  }
});

4 — Четвертый шаг: Активируйте наблюдателя Чокидар. Для этого вам необходимо установить библиотеку «concurrently», выполнив команду «npm install concurrently».
Эта библиотека позволяет запускать несколько скриптов одновременно

Для приложения React ваш файл package.json должен выглядеть примерно так:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watcher": "node [PATH DE VOTRE FICHIER]/watcher.js",
    "dev": "concurrently \"npm run watcher\" \"npm run start\" "
  },

Теперь вы можете запустить команду «npm run dev», чтобы начать отслеживать изменения.
Эта команда запустит файл watcher.js для изменений и вашего приложения.

ПОЛНЫЙ КОД

// watcher.js
const chokidar = require("chokidar");
const fs = require("fs");

// Detect if a file exist
const fileExists = (path) => (file) => fs.existsSync(`${path}/${file}`);

// Create a file with a content on a path
const writeToPath = (path) => (file, content) => {
  const filePath = `${path}/${file}`;

  fs.writeFile(filePath, content, (err) => {
    if (err) throw err;
    console.log("file Created : ", filePath);
    return true;
  });
};

const templates = {
  index: (name) =>
    `import React from 'react';
    const ${name} = ({ props }) => {
return (
      <h1 className="${name}">
         ${name} 
      </h1>
  )
};
export default ${name};`
}

const files = {
    index: "index.js",
  };

const watcher = chokidar.watch("src/Views/*", { ignored: /node_modules/ }).on("addDir", (path, event) => {
  
// Get the name of the folder created from the "path" variable 
  let name = path.replace(/.*\/Views\//, "");
  if (name.includes("Views") || name.includes("src") || name.includes("/")) {
    name = name.replace("/", "").replace("Views", "").replace("src", "").replace(/\\/g, "").replace(/\\\//g, "");
  }

  if (!name.includes("/")) {
    // Every time you launch the watcher it will recreate the files 
    // so we will look if they exist or not
    const toFileMissingBool = (file) => !fileExists(path)(file);
    const checkAllMissing = (acc, cur) => acc && cur;
    const noneExist = Object.values(files).map(toFileMissingBool).reduce(checkAllMissing);

    if (noneExist) {
     // create every file in the "files" variables
     const writeFile = writeToPath(path);
      Object.entries(files).forEach(([type, fileName]) => {
        writeFile(fileName, templates[type](name));
      });
    }

  }
});

Наслаждайтесь кодированием

Вы можете следить за мной в моих социальных сетях

Behance https://www.behance.net/regisgrumberg

Инстаграм https://www.instagram.com/grb.ig/

Linkedin https://www.linkedin.com/in/regisgrumberg/

Awwwards https://www.awwwards.com/sites/grb-experimental-portfolio

Подробнее читайте на моей средней странице, Статья каждый день с 22.12.23 :)
https://medium.com/@pro.grb.studio