Efficient imports without aliases

[jpriollaud]

I'm starting a second project with Vite Ruby. The first one went well because the library rocks generally.

In the first project I used aliases everywhere ( ~/ ) which worked fine, but felt wrong.

In this second project I'm trying to integrate a big foreign-code template with a huge number of existing imports:
https://github.com/codedthemes/mantis-free-react-admin-template/tree/main/src

I've read and re-read multiple times every doc and discussion on sourcecodedir, watchadditionalpaths, aliases, entrypoints, etc. and it still doesn't make sense that I can't set a root relative to my sourcecodedir and then forgo aliases.

How would you go about integrating a huge template codebase with 100+ function import statements, honoring the existing import structure which we know works, without adding ~/ to every single one?

This feels very wrong, and ultimately does not work:

"additionalEntrypoints": [ "~/{assets,components,layout,menu-items,pages,routes,store,themes,utils}/**/*"

I feel like I'm missing something obvious.

[ElMassimo]

Have in mind that you can always define your own aliases by using Vite's resolve.alias.

For example, in the repo you mentioned, you could use fs to list all directories in the root (such as components, assets, store), and define an alias for each, allowing to minimize changes to the code you are migrating.

See this gist for a similar approach that reads tsconfig.json and defines an alias for each alias that TypeScript is configured to understand.

---

I used aliases everywhere ( ~/ ) which worked fine, but felt wrong

This is the most robust approach though, as it's overall more compatible with other tools (like TypeScript).

You can use @/ if what feels wrong is the ~ symbol, or choose a different convention.

---

This feels very wrong, and ultimately does not work:

Additional entrypoints are not related with import aliases.

[jpriollaud]

Thanks @ElMassimo I had missed this in the docs (collapsed)

My version:

// vite.config.ts

import { defineConfig } from 'vite'
import ViteRails from 'vite-plugin-rails'
import fs from 'fs'
import path from 'path'
import react from '@vitejs/plugin-react'

const sourceCodeDir = "app/frontend"
const items = fs.readdirSync(sourceCodeDir)
const directories = items.filter(item => fs.lstatSync(path.join(sourceCodeDir, item)).isDirectory())
const aliasesFromJavascriptRoot = {}
directories.forEach(directory => {
  aliasesFromJavascriptRoot[directory] = path.resolve(__dirname, sourceCodeDir, directory)
})

export default defineConfig({
  plugins: [
    ViteRails(),
    react()
  ],
  resolve: {
    alias: {
      ...aliasesFromJavascriptRoot
    },
  }
})