mentaljam / rollup-plugin-html2

Rollup plugin to inject bundled files to an HTML template
https://www.npmjs.com/package/rollup-plugin-html2
MIT License
20 stars 5 forks source link

Preload modules from node_modules? #6

Open MrFoxPro opened 3 years ago

MrFoxPro commented 3 years ago

Hi. Im trying to use preload setting to preload some additional vendor modules. But it doesn't work :\ I found this: https://github.com/mentaljam/rollup-plugin-html2/blob/7405e9a9ee385e3449ea2ccf50c2c85ff5cd7cd1/src/index.ts#L370

here dynamicEntries does not contain chunks splitted in rollup

my rollup config:

import image from '@rollup/plugin-image';
import html2 from 'rollup-plugin-html2';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import path from 'path';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

const extensions = ['.ts', '.tsx', '.js', '.jsx'];
const preload = ['solid-js', 'router5'];
const production = process.env.NODE_ENV === 'production';
console.log(production ? 'production' : 'development', 'mode');
/** @type {import('rollup').RollupOptions} */
const config = {
  input: 'source/index.tsx',
  treeshake: production,
  preserveEntrySignatures: false,
  watch: {
    clearScreen: true,
  },
  output: {
    strict: true,
    sourcemap: !production ? 'inline' : false,
    dir: './distribution',
    format: 'esm',
    manualChunks: (id) => {
      if (id.includes('node_modules')) {
        // The directory name following the last `node_modules`.
        // Usually this is the package, but it could also be the scope.
        const directories = id.split(path.sep);
        const name = directories[directories.lastIndexOf('node_modules') + 1];
        // Group react dependencies into a common "react" chunk.
        // NOTE: This isn't strictly necessary for this app, but it's included
        // as an example to show how to manually group common dependencies.
        const lib = preload.find((x) => name.includes(x));
        if (lib) return lib;
        return name;
        // Group `tslib` and `dynamic-import-polyfill` into the default bundle.
        // NOTE: This isn't strictly necessary for this app, but it's included
        // to show how to manually keep deps in the default chunk.
        // if (name === 'tslib' || name === 'dynamic-import-polyfill') {
        //   return;
        // }
        // // Otherwise just return the name.
        // return name;
      }
    },
  },

  plugins: [
    nodeResolve({
      browser: true,
      extensions,
    }),
    babel({
      extensions,
      babelHelpers: 'bundled',
      presets: ['solid', '@babel/preset-typescript'],
      exclude: /node_modules/,
    }),
    commonjs({
      extensions,
    }),
    postcss({
      modules: {
        generateScopedName: production ? '[local][hash:base64:2]' : undefined,
      },
      extract: true,
      minimize: production,
    }),
    !production && serve('distribution'),
    !production && livereload(),
    image(),
    html2({
      template: './source/assets/index.html',
      modules: true,
      preload,
      minify: {
        minifyCSS: production,
        minifyURLs: production,
        removeComments: production,
        removeEmptyAttributes: production,
        removeTagWhitespace: production,
        removeRedundantAttributes: production,
        removeAttributeQuotes: production,
        minifyJS: production,
      },
      externals: [],
    }),
    alias({
      entries: [{ find: '@', replacement: path.join(__dirname, 'source') }],
    }),
    production &&
      terser({
        compress: true,
        module: true,
        format: {
          comments: false,
        },
      }),
  ],
};
export default config;
MrFoxPro commented 3 years ago

https://github.com/mentaljam/rollup-plugin-html2/pull/7

mentaljam commented 2 years ago

Please, check if dynamic modules from node_modules work now