transforming data during build in a vite project that uses eslint and typescript

[stuvjordan-uroc]

Hi Everyone!

I need to transform some data during the build stage. The data that needs to be transformed are in local files in my project, and so my first instinct in writing the transformation scripts was to use node's standard filesystem library.

I'm finding, however, that this requires modifications to the eslint.config.js and/or tsconfig produced by npm create vite@latest that go way beyond my very slim knowledge of eslint and typescript configuration. (I should probably also say that I'm writing all my code in typescript.)

This raises two questions for me:

1. Can anyone recommend a community template that includes configs of eslint and typescript that accommodate use of "node:fs" and other such standard nodejs modules by build scripts written in typescript? I'm asking because I'm guessing that it's not uncommon for developers using vite (with eslint and typescript) to need to use nodejs libraries during build.

2. As an alternative, it occurs to me that I could just import the contents of the datafiles as strings in the build scripts, since the eslint and typescript configs provided by npm create vite@latest are set to understand that way of using import. This may not be ideal in my case, as the files I need to transform are very large, so I may need to stream them depending on the memory resources of my dev environment. (And perhaps I should also say that I definitely do NOT want these files bundled nor do I want to put them in the /public folder.) I guess my question here is for experienced developers who use vite: What's the recommended way to solve this problem? Tuning eslint.config.js so that you can use "node:fs" in build scripts, or instead just using import to load data into a build script? (Or is there some alternative approach that beats those two?)

Thanks!

[ghostkillerr]

Keep build scripts in the Node configuration, separate from browser application code. If the template contains tsconfig.node.json, add scripts/**/*.ts to its include and ensure it has types: ['node'] with @types/node installed. In ESLint flat config, scope Node globals to those same files rather than enabling them for the browser application:

{
  files: ['vite.config.ts', 'scripts/**/*.ts'],
  languageOptions: { globals: globals.node },
}

Here globals comes from the globals package. Adjust your existing config rather than replacing it wholesale. Type declarations do not themselves execute TypeScript: invoke your script through a compatible TS runner or compile it first. Use a Vite plugin with apply: 'build' and an awaited buildStart hook if generation must be part of Vite's lifecycle. node:fs and streaming are appropriate there; importing these scripts from browser code is not. Generated outputs are only bundled if deliberately referenced or emitted.

References: https://www.typescriptlang.org/tsconfig/types.html , https://eslint.org/docs/latest/use/configure/language-options and https://vite.dev/guide/api-plugin.html

Prepared with AI assistance and checked against the linked documentation. I have not reproduced your original project locally.

[Icaro0310]

The vite.config.ts file itself runs in Node, so you can use fs there without touching your app's tsconfig or the eslint rules covering src. I'd do the transform in a tiny inline plugin:

// vite.config.ts
import { defineConfig, type Plugin } from 'vite'
import { readFileSync, writeFileSync } from 'node:fs'

function transformData(): Plugin {
 return {
 name: 'transform-data'
 buildStart() {
 const raw = readFileSync('data/input.json', 'utf-8')
 writeFileSync('public/transformed.json', transform(raw))
 }
 }
}

export default defineConfig({ plugins: [transformData()] })

The template already ships a tsconfig.node.json that covers vite.config.ts, so node imports typecheck fine in that file. If eslint still nags, either give the config file its own eslint block with node globals, or sidestep the whole thing and run your script as a prebuild npm script, which needs zero Vite integration.

—
Related work of mine: github.com/Icaro0310 · Website: icaro0310.github.io