React Rollup

rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import html from '@rollup/plugin-html';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import typescript from '@rollup/plugin-typescript';
import license from 'rollup-plugin-license';
import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';
import styles from 'rollup-plugin-styles';
import { terser } from 'rollup-plugin-terser';

const watch = process.env.ROLLUP_WATCH === 'true';
const optimize = watch === false;

const serverPlugins = watch
  ? [
      serve({
        open: true,
        contentBase: './dist/web',
      }),
      livereload({
        watch: './dist/web',
      }),
    ]
  : [];

export default {
  input: './projects/web/src/main.tsx',
  output: {
    dir: './dist/web',
    format: 'iife',
    sourcemap: true,
    assetFileNames: '[name][extname]',
  },
  plugins: [
    nodeResolve({
      extensions: ['.js'],
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(optimize ? 'production' : 'development'),
      preventAssignment: true,
    }),
    commonjs(),
    typescript({
      tsconfig: './projects/web/tsconfig.json',
    }),
    optimize
      ? terser({
          output: {
            comments: false,
          },
        })
      : undefined,
    optimize
      ? license({
          sourcemap: true,
          thirdParty: {
            output: {
              file: './dist/web/dependencies.txt',
            },
          },
        })
      : undefined,
    styles({
      mode: ['extract', 'styles.css'],
      minimize: optimize,
      sourceMap: true,
    }),
    html({
      title: 'My App',
      meta: [
        { charset: 'UTF-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
      ],
    }),
    ...serverPlugins,
  ],
};