rollup-plugin-terser#terser TypeScript Examples

processBundle = async ({ swDest }: { swDest: string }) => {
  const bundle = await rollup.rollup({
    input: swDest,
    plugins: [
      replace({ 'process.env.NODE_ENV': '"production"' }) as rollup.Plugin,
      resolve(),
      terser({ output: { comments: false } }),
    ],
  });
  await bundle.write({
    file: swDest,
    format: 'iife',
  });
}

buildCjsPackage = ({ env }) => ({
  input: 'compiled/index.js',
  output: {
    file: `dist/index.${env}.js`,
    name,
    format: 'cjs',
    sourcemap: true,
    exports: 'named',
    globals: {},
  },
  plugins: [
    copy({
      flatten: false,
      targets: [
        { src: 'bin/**/*.*', dest: 'dist/bin/' },
        { src: 'cli.js', dest: 'dist/' },
        { src: 'cypress.json', dest: 'dist/' },
        { src: 'cypress/**/*.*', dest: 'dist/cypress/' },
      ],
    }),
    commonjs({
      include: /node_modules/,
    }),
    resolve(),
    sourceMaps(),
    env === 'production' && terser(),
  ],
})

export function createBrowserConfig({
  input,
  output,
  multiInputConfig,
  svelteConfig,
  replacements = {},
  elderConfig,
  startDevServer = false,
}) {
  const toReplace = {
    'process.env.componentType': "'browser'",
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    preventAssignment: true,
    ...replacements,
  };

  const config = {
    cache: true,
    treeshake: production,
    input,
    output,
    plugins: [
      replace(toReplace),
      json(),
      elderSvelte({ svelteConfig, type: 'client', elderConfig, startDevServer }),
      nodeResolve({
        browser: true,
        dedupe: ['svelte'],
        preferBuiltins: true,
        rootDir: process.cwd(),
      }),
      commonjs({ sourceMap: !production }),
    ],
    watch: {
      chokidar: {
        usePolling: process.platform !== 'darwin',
      },
    },
  };

  // bundle splitting.
  if (multiInputConfig) {
    config.plugins.unshift(multiInputConfig);
  }

  // ie11 babel

  // if is production let's babelify everything and minify it.
  if (production) {
    config.plugins.push(
      babel({
        extensions: ['.js', '.mjs', '.cjs', '.html', '.svelte'],
        include: ['node_modules/**', 'src/**'],
        exclude: ['node_modules/@babel/**'],
        runtimeHelpers: true,
      }),
    );

    // terser on prod
    config.plugins.push(terser());
  }

  return config;
}

export function createSSRConfig({
  input,
  output,
  svelteConfig,
  replacements = {},
  multiInputConfig,
  elderConfig,
  startDevServer = false,
}) {
  const toReplace = {
    'process.env.componentType': "'server'",
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    ...replacements,
  };

  const config = {
    cache: true,
    treeshake: production,
    input,
    output,
    plugins: [
      replace(toReplace),
      json(),
      elderSvelte({ svelteConfig, type: 'ssr', elderConfig, startDevServer }),
      nodeResolve({
        browser: false,
        dedupe: ['svelte'],
      }),
      commonjs({ sourceMap: true }),
      production && terser(),
    ],
    watch: {
      chokidar: {
        usePolling: !/^(win32|darwin)$/.test(process.platform),
      },
    },
  };
  // if we are bundle splitting include them.
  if (multiInputConfig) {
    config.plugins.unshift(multiInputConfig);
  }

  return config;
}

buildCjsPackage = ({ env }) => {
  return {
    input: `compiled/index.js`,
    output: [
      {
        file: `dist/index.${env}.js`,
        name: libraryName,
        format: 'cjs',
        sourcemap: true,
        exports: 'named',
        globals: {},
      },
    ],
    external: ['lodash', 'apache-arrow'], // Use Lodash & arrow from grafana
    plugins: [
      commonjs({
        include: /node_modules/,
        namedExports: {
          '../../node_modules/lodash/lodash.js': [
            'flatten',
            'find',
            'upperFirst',
            'debounce',
            'isNil',
            'isNumber',
            'flattenDeep',
            'map',
            'chunk',
            'sortBy',
            'uniqueId',
            'zip',
          ],
        },
      }),
      resolve(),
      sourceMaps(),
      env === 'production' && terser(),
    ],
  };
}

buildCjsPackage = ({ env }) => {
  return {
    input: `compiled/index.js`,
    output: [
      {
        file: `dist/index.${env}.js`,
        name: libraryName,
        format: 'cjs',
        sourcemap: true,
        exports: 'named',
        globals: {},
      },
    ],
    external: ['lodash', '@grafana/ui', '@grafana/data'], // Use Lodash from grafana
    plugins: [
      commonjs({
        include: /node_modules/,
        namedExports: {
          '../../node_modules/lodash/lodash.js': [
            'flatten',
            'find',
            'upperFirst',
            'debounce',
            'isNil',
            'isNumber',
            'flattenDeep',
            'map',
            'chunk',
            'sortBy',
            'uniqueId',
            'zip',
          ],
        },
      }),
      resolve(),
      sourceMaps(),
      env === 'production' && terser(),
    ],
  };
}

buildCjsPackage = ({ env }) => {
  return {
    input: `compiled/index.js`,
    output: [
      {
        file: `dist/index.${env}.js`,
        name: libraryName,
        format: 'cjs',
        sourcemap: true,
        strict: false,
        exports: 'named',
        globals: {
          react: 'React',
          'prop-types': 'PropTypes',
        },
      },
    ],
    external: ['react', 'react-dom', '@grafana/data', 'moment'],
    plugins: [
      commonjs({
        include: /node_modules/,
        // When 'rollup-plugin-commonjs' fails to properly convert the CommonJS modules to ES6 one has to manually name the exports
        // https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports
        namedExports: {
          '../../node_modules/lodash/lodash.js': [
            'flatten',
            'find',
            'upperFirst',
            'debounce',
            'isNil',
            'isNumber',
            'flattenDeep',
            'map',
            'chunk',
            'sortBy',
            'uniqueId',
            'zip',
            'omit',
          ],
          '../../node_modules/react-color/lib/components/common': ['Saturation', 'Hue', 'Alpha'],
          '../../node_modules/immutable/dist/immutable.js': [
            'Record',
            'Set',
            'Map',
            'List',
            'OrderedSet',
            'is',
            'Stack',
          ],
          'node_modules/immutable/dist/immutable.js': ['Record', 'Set', 'Map', 'List', 'OrderedSet', 'is', 'Stack'],
          '../../node_modules/esrever/esrever.js': ['reverse'],
          '../../node_modules/bizcharts/es6/index.js': ['Chart', 'Geom', 'View', 'Tooltip', 'Legend', 'Guide'],
        },
      }),
      resolve(),
      // sourceMaps(),
      env === 'production' && terser(),
    ],
  };
}

function configBuilder({ location, pkgJson }) {
  const tsPlugin = ts({
    check: true,
    tsconfig: path.resolve(location, "tsconfig.build.json"),
    cacheRoot: path.resolve(__dirname, "node_modules/.rts2_cache"),
    useTsconfigDeclarationDir: true,
    tsconfigOverride: {
      compilerOptions: {
        sourceMap: true,
        declaration: true,
        declarationMap: true
      }
    }
  });

  const commonPlugins = [
    resolve({
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      preferBuiltins: true
    }),
    // babel({
    //   extensions: [".js", ".jsx", ".ts", ".tsx"],
    //   babelHelpers: "runtime",
    //   exclude: ["node_modules/**", "packages/**/node_modules/**"]
    // }),
    tsPlugin,
    commonjs(),
    replace({
      preventAssignment: true,
      __PkgName: pkgJson.name,
      __PkgVersion: pkgJson.version,
      __BuildTime: new Date().toLocaleString()
    })
  ];

  const input = path.join(location, "src", "index.ts");
  const external = Object.keys(pkgJson.dependencies || {});

  return {
    umd: (compress) => {
      let file = path.join(location, "dist", "umd.js");
      const plugins = [...commonPlugins];

      if (compress) {
        file = path.join(location, "dist", "umd.min.js");
        plugins.push(terser({ output: { comments: false } }));
      }

      if (printSizePkg.includes(pkgJson.name) && file.indexOf("min.js") > -1) {
        plugins.push(filesize());
      }

      const globalName = camelcase(pkgJson.name);
      const globals = {};
      external.forEach((pkgName) => {
        globals[pkgName] = camelcase(pkgName);
      });

      return {
        input,
        external: {},
        output: [
          {
            file,
            name: globalName,
            format: "umd",
            sourcemap: true
          }
        ],
        plugins
      };
    },
    module: () => {
      const plugins = [...commonPlugins];
      return {
        input,
        external,
        output: [
          {
            file: path.join(location, pkgJson.module),
            format: "es",
            sourcemap: true
          },
          {
            file: path.join(location, pkgJson.main),
            format: "commonjs",
            sourcemap: true
          }
        ],
        plugins
      };
    }
  };
}

export function createRollupConfig(params: CreateRollupConfigParams): RollupOptions {
  const { outputDir, indexFilename, indexHtmlString, storyFilePaths } = params;

  const options: RollupOptions = {
    preserveEntrySignatures: false,
    onwarn,
    output: {
      entryFileNames: '[hash].js',
      chunkFileNames: '[hash].js',
      assetFileNames: '[hash][extname]',
      format: 'system',
      dir: outputDir,
    },
    plugins: [
      resolve({
        moduleDirectories: ['node_modules', 'web_modules'],
      }),
      babel({
        babelHelpers: 'bundled',
        babelrc: false,
        configFile: false,
        extensions: [...DEFAULT_EXTENSIONS, 'md', 'mdx'],
        exclude: `${prebuiltDir}/**`,
        presets: [
          [
            require.resolve('@babel/preset-env'),
            {
              targets: [
                'last 3 Chrome major versions',
                'last 3 ChromeAndroid major versions',
                'last 3 Firefox major versions',
                'last 3 Edge major versions',
                'last 3 Safari major versions',
                'last 3 iOS major versions',
                'ie 11',
              ],
              useBuiltIns: false,
              shippedProposals: true,
              modules: false,
              bugfixes: true,
            },
          ],
        ],
        plugins: [
          [require.resolve('babel-plugin-bundled-import-meta'), { importStyle: 'baseURI' }],
          [
            require.resolve('babel-plugin-template-html-minifier'),
            {
              modules: {
                // this is web component specific, but has no effect on other project styles
                'lit-html': ['html'],
                'lit-element': ['html', { name: 'css', encapsulation: 'style' }],
                '@web/storybook-prebuilt/web-components': [
                  'html',
                  { name: 'css', encapsulation: 'style' },
                ],
                '@web/storybook-prebuilt/web-components.js': [
                  'html',
                  { name: 'css', encapsulation: 'style' },
                ],
                '@open-wc/testing': ['html', { name: 'css', encapsulation: 'style' }],
                '@open-wc/testing-helpers': ['html', { name: 'css', encapsulation: 'style' }],
              },
              logOnError: true,
              failOnError: false,
              strictCSS: true,
              htmlMinifier: {
                collapseWhitespace: true,
                conservativeCollapse: true,
                removeComments: true,
                caseSensitive: true,
                minifyCSS: true,
              },
            },
          ],
        ],
      }) as Plugin,
      html({ input: { name: indexFilename, html: indexHtmlString } }) as Plugin,
      polyfillsLoader({
        polyfills: {
          coreJs: true,
          fetch: true,
          abortController: true,
          regeneratorRuntime: 'always',
          webcomponents: true,
          intersectionObserver: true,
          resizeObserver: true,
        },
      }) as Plugin,
      terser({ format: { comments: false } }) as Plugin,
    ],
  };

  if (storyFilePaths && storyFilePaths.length > 0) {
    // plugins we need to inject only in the preview
    options.plugins!.unshift(injectExportsOrderPlugin(storyFilePaths));
    options.plugins!.unshift(mdxPlugin());
    options.plugins!.unshift(mdjsPlugin(params.type));
  }

  return options;
}