Получить содержимое файла во время сборки Gatsby

Question

Мне нужно вытащить содержимое исходного файла программы для отображения на странице, сгенерированной Gatsby.У меня есть все, что связано с тем, что я могу звонить

// my-fancy-template.tsx
import { readFileSync } from "fs";
// ...
const fileContents = readFileSync("./my/relative/file/path.cs");

Однако при запуске gatsby develop или gatsby build я получаю следующую ошибку

Эта зависимость не найдена: ⠀ * fs in ./src/templates/my-fancy-template.tsx ⠀ Чтобы установить ее, вы можете запустить: npm install --save fs

Однако, вся документация предполагает, что этот модуль является нодальным для Node , если не запущен в браузере.Я еще не слишком знаком с Node, но, учитывая, что gatsby build также не работает (эта команда даже не запускает локальный сервер), я был бы немного удивлен, если бы это была проблема.

Iдаже пробовал это с нового тестового сайта (gatsby new test) с тем же эффектом.

Answer 1

Я нашел это на боковой панели и сделал снимок, но, похоже, просто объявил , что fs было доступно;на самом деле он не предоставил fs.

. Затем меня поразило, что, хотя Гэтсби создает страницы во время сборки, он не может отображать эти страницы, пока они не понадобятся.Это может быть ошибочной оценкой, но в конечном итоге это привело к необходимому решению:

1. Вам необходимо добавить содержимое файла в поле на File (при условии, что выиспользуя gatsby-source-filesystem) во время exports.onCreateNode в gatsby-node.js.Вы можете сделать это обычным способом:

   if (node.internal.type === `File`) {
       fs.readFile(node.absolutePath, undefined, (_err, buf) => {
           createNodeField({ node, name: `contents`, value: buf.toString()});
       });
   }
   

2. Затем вы можете получить доступ к этому полю в вашем запросе внутри my-fancy-template.tsx:

   { 
     allFile {
       nodes {
         fields { content }
       }
     }
   }
   

Оттуда вы можете использовать fields.content внутри каждого элемента allFile.nodes.(Это, конечно, также относится к file методам запросов.)

Естественно, я был бы в восторге, если бы у кого-то было более элегантное решение: -)