Loading...
Loading...
Best practices and guidelines for Rollup.js module bundler configuration, ES modules, and library bundling
npx skill4agent add mindrally/skills rollup-bundlerproject/
├── src/
│ ├── index.js # Main entry point
│ ├── modules/ # Internal modules
│ └── utils/ # Utility functions
├── dist/ # Build output
│ ├── bundle.esm.js # ES module format
│ ├── bundle.cjs.js # CommonJS format
│ └── bundle.umd.js # UMD format
├── rollup.config.mjs # Configuration file
└── package.json// rollup.config.mjs
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
sourcemap: true
}
};export default {
input: 'src/index.js',
output: [
{
file: 'dist/bundle.esm.js',
format: 'esm',
sourcemap: true
},
{
file: 'dist/bundle.cjs.js',
format: 'cjs',
sourcemap: true
},
{
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'MyLibrary',
sourcemap: true
}
]
};// Prefer named exports for better tree-shaking
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// Avoid default exports when possible
// export default { add, subtract }; // Less tree-shakeable// Static imports enable tree-shaking
import { specificFunction } from './utils';
// Avoid dynamic requires in library code
// const utils = require('./utils'); // CommonJS - no tree-shakingimport resolve from '@rollup/plugin-node-resolve';
export default {
plugins: [
resolve({
browser: true,
preferBuiltins: false
})
]
};import commonjs from '@rollup/plugin-commonjs';
export default {
plugins: [
commonjs()
]
};import babel from '@rollup/plugin-babel';
export default {
plugins: [
babel({
babelHelpers: 'bundled',
presets: ['@babel/preset-env']
})
]
};import typescript from '@rollup/plugin-typescript';
export default {
input: 'src/index.ts',
plugins: [
typescript({
tsconfig: './tsconfig.json'
})
]
};import terser from '@rollup/plugin-terser';
export default {
plugins: [
terser()
]
};import replace from '@rollup/plugin-replace';
export default {
plugins: [
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};export default {
input: 'src/index.js',
external: ['react', 'react-dom', 'lodash'],
output: {
file: 'dist/bundle.js',
format: 'esm',
globals: {
react: 'React',
'react-dom': 'ReactDOM'
}
}
};import pkg from './package.json';
export default {
external: [
...Object.keys(pkg.peerDependencies || {}),
...Object.keys(pkg.dependencies || {})
]
};export default {
input: {
main: 'src/index.js',
utils: 'src/utils/index.js'
},
output: {
dir: 'dist',
format: 'esm'
}
};// Rollup handles dynamic imports automatically
async function loadModule() {
const module = await import('./heavy-module.js');
return module.default;
}// Mark functions as pure for better tree-shaking
export const compute = /*#__PURE__*/ createCompute();{
"name": "my-library",
"sideEffects": false
}// rollup.config.mjs
export default {
watch: {
include: 'src/**',
clearScreen: false
}
};rollup -c -w{
"name": "my-library",
"version": "1.0.0",
"main": "dist/bundle.cjs.js",
"module": "dist/bundle.esm.js",
"browser": "dist/bundle.umd.js",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/bundle.esm.js",
"require": "./dist/bundle.cjs.js"
}
},
"files": ["dist"],
"sideEffects": false
}import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import pkg from './package.json';
export default {
input: 'src/index.ts',
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
terser()
],
output: [
{ file: pkg.main, format: 'cjs', sourcemap: true },
{ file: pkg.module, format: 'esm', sourcemap: true }
]
};--configDebug