Folder as entry in library mode for multiple independent js modules

[thierryiseli]

I have the case that there is not one entry point for the library. There are several relatively independent js modules. In this library, there is also no bundling or minify what is expected behaviour for my case. In order to be able to specify all of them as
entry points, I have solved this as follows:

import path from "path";
import glob from "glob";

export default {
    build: {
        outDir: path.resolve(__dirname, "build"),
        emptyOutDir: true,
        cssCodeSplit: true,
        lib: {
            entry: path.resolve(__dirname, "src/index.js"),
            formats: ["esm"]
        },
        rollupOptions: {
            input: glob.sync(path.resolve(__dirname, "src/**/*.{js,css}")),
            output: {
                preserveModules: true,
                preserveModulesRoot: "src",
                entryFileNames: ({name: fileName}) => {
                    return `${fileName}.js`
                }
            }
        }
    }
}

Idea: For a library that does not have a direct entry point but several individual js modules, it would be practical to be able to specify the lib entry as a folder. If it is a folder, it should then include all files, for example, with the extension *.js, *.html, *.css as entrypoints. The configuration remains the same, but a distinction is made between folder and file.

[Tanimodori]

This config saves my day of searching how to disable vite bundling all things into a index.js.

There're some notes for the original solution.

• set build.minify to false if you want to disable minify explicitly.
• build.rollupOptions.input is not needed as long as you specify build.lib.entry, vite will pass those required to rollup, add it if you want to include all scripts including those not required by entry.
• build.rollupOptions.output.preserveModulesRoot seems not working. The magic here is actually build.rollupOptions.output.preserveModules and build.rollupOptions.output.entryFileNames.
• The original build.rollupOptions.output.entryFileNames have a problem. Say you want a strict map from src/generator/app/index.ts to dist/generator/app/index.ts turns out to be dist/index.ts. The middle part is missing for unknown reason. My approach here is extract the missing part from facadeModuleId. Thus the final solution for me is like

import { defineConfig } from 'vite';
import path from 'path';
import glob from 'glob';

export default defineConfig({
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    cssCodeSplit: true,
    minify: false,
    lib: {
      entry: path.resolve(__dirname, 'src/generator/app/index.ts'),
      formats: ['cjs'],
    },
    rollupOptions: {
      external: ['yeoman-generator'],
      input: glob.sync(path.resolve(__dirname, 'src/**/*.ts')),
      output: {
        preserveModules: true,
        entryFileNames: (entry) => {
          const { name, facadeModuleId } = entry;
          const fileName = `${name}.js`;
          if (!facadeModuleId) {
            return fileName;
          }
          const relativeDir = path.relative(
            path.resolve(__dirname, 'src'),
            path.dirname(facadeModuleId),
          );
          return path.join(relativeDir, fileName);
        },
      },
    },
  },
});

I just copy-paste my config here in case of someone wants to build a yeoman-generator with vite.

[luckylooke]

Hi @Tanimodori

what is inside 'src/generator/app/index.ts'?

Also you mentioned:

build.rollupOptions.input is not needed as long as you specify build.lib.entry

but in your resulted solution you have used both, thats confusing then, exspecially when I don't know what is content of index.ts referenced in lib.entry

Looking forward to your answer,
Thanks 🙏

[Tanimodori]

src/generator/app/index.ts is my main script entry.

In vite<3.2.0 setting build.rollupOptions.input will override build.lib.entry so build.lib.entry is meaningless here, just set it in case of any wierd things happen since it is required in config.

As mentioned below, this configuration is obsoleted as vite 3.2.0 brings multi-entry support for lib mode. Use the official multi-entry configurations instead in vite>3.2.0.

[gerardhoogland-united]

Is this code in vite.config.ts? I suppose so. But my build fails on this. As soon as I add line:
input: glob.sync(path.resolve(__dirname, 'src/**/*.ts')),
and do npm run build, it fails with: You must supply options.input to rollup.
What does that mean? and how to fix it?

[onursagir]

@gerardhoogland-united Did you install and import glob?

[gerardhoogland-united]

yes I did. Thanks for thinking with me.

[onursagir]

@gerardhoogland-united To further elaborate on your second commen your config would have to look like this

  build: {
    lib: {
      entry: glob.sync(path.resolve(__dirname, 'lib/**/*.ts')),
      name: '',
    },
    rollupOptions: {
      output: {
        preserveModules: true,
        // ^^^ This one is not required but if I understand correctly you do need it in your use case
      },
    },
  },

[gerardhoogland-united]

Thanks! That makes sense to me now. I will try that.

[andy4277]

Was following this solution and found it a little tricky if you run it on Windows. Basically 'glob.sync' in this case will always returns an empty array in Windows and it has to do how 'glob' is treating "" as an escape character, so when path.resolve returns windows path it's full of escape characters. Anyway if you reverse it, it will still work on Windows js { entry: glob.sync('lib/**/*ts').map(file => path.resolve(__dirname, file)) }

[zsh2401]

Thanks a lot! You saved my way to develop my software.

[jasenmichael]

here is a simple approach..
https://gist.github.com/jasenmichael/58dd3a4f8e7ec1d003e88907bba392d7