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