0

Suppose the project has the following structure:

  • src/
    • controllers/
      • controller1.ts
      • controller2.ts
    • utils/
      • misc.ts
      • other-file.ts
    • index.ts
  • node_modules/

And I need to get dist structure like this:

  • dist/
    • controllers/
      • controller1.js
      • controller2.js
      • _app.js (for utils)
      • _vendor.js (for node_modules)
    • index.js

Here's the rollup.mjs

export default {
  input: [
    'src/index.ts',
    ...glob.sync('src/controllers/**/*.ts', { ignore: ['src/**/*.test.ts'] }),
  ],
  output: {
    dir: 'dist',
    format: 'cjs',
    chunkFileNames: '[name].js',
    entryFileNames: (chunkInfo) => {
      const { dir, name } = parse(relative('src', chunkInfo.facadeModuleId));
      if (dir.startsWith('controllers')) {
        return `${dir}/${name}.js`;
      }

      return 'controllers/_app.js';
    },
    manualChunks: (id) => {
      if (id.includes('node_modules')) {
        return 'controllers/_vendor';
      }
      return 'controllers/_app';
    },
  },
  perf: true,
  plugins: [
    del({ targets: 'dist/*' }),
    preserveShebangs(),
    commonjs(),
    nodeResolve({ preferBuiltins: true }),
    json({ compact: true }),
    typescript({ tsconfig: './tsconfig.build.json' }),
  ],
};

Rollup can create separate bundles for controllers, utils and node_modules as long as index.ts is not defined in input. Once index.ts is included, the contents of the utils are added to index.js, and a separate package for the utils is no longer created.

Can rollup create chucks for the structure above? Or do I need to build custom rollup plugin for this. Any ideas?

Thank you

Black Moon
  • 1
  • 2
  • 6

0 Answers0