alwaysonlinetxm / rollup-plugin-fill-html Goto Github PK

// rollup.config.js
import commonjs    from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import babel       from 'rollup-plugin-babel';
import Replace     from 'rollup-plugin-replace';
import serve       from 'rollup-plugin-serve'
import livereload  from 'rollup-plugin-livereload'
import uglify      from 'rollup-plugin-uglify';
import html        from 'rollup-plugin-fill-html';

const isProduction = process.env.NODE_ENV === 'production'

function setConfig (options) {
  const config = {
    input: options.input,
    output: {
      file: isProduction ? options.output.minifyFilename : options.output.filename,
      format: 'iife',
      sourcemap: isProduction ? false : 'inline'
    },
    plugins: [
      babel({
        exclude: 'node_modules/**' // only transpile our source code
      }),
      nodeResolve(),
      commonjs({
        namedExports: {
          'node_modules/react/index.js': ['Children', 'Component', 'createElement']
        }
      }),
      Replace({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }),
      html({
        template: options.html.template,
        filename: options.html.filename
      })
      // browsersync({server: 'home'})
    ]
  }

  if (isProduction) {
    config.plugins = config.plugins.concat([
      // hash({
      // 	dest: options.output.minifyFilename
      // }),
      uglify({
        compress: {
          warnings: false,
          drop_console: true
        },
        output: {
          comments: false
        }
      })
    ])
  } else {
    // config.plugins = config.plugins.concat([
    //   serve({
    //     open: true,
    //     historyApiFallback: true,
    //     contentBase: ['./dist'],
    //     port: 8080,
    //   }),
    //   livereload()
    // ])
  }

  return config
}

const configs = [
  setConfig({
    input: './src/auth/main.js',
    output: {
      minifyFilename: './dist/auth/index.min.[hash].js',
      filename: './dist/auth/index.js'
    },
    html: {
      template: './src/auth/index.html',
      filename: 'auth/index.html',
    }
  }),
  setConfig({
    input: './src/home/main.js',
    output: {
      minifyFilename: './dist/home/index.min.[hash].js',
      filename: './dist/home/index.js'
    },
    html: {
      template: './src/home/index.html',
      filename: 'home/index.html',
    }
  })
]

export default configs

I got this in auth/index.html

and i got this in home/index.html

By the way, the path is not my expectation

I just checkout to this repo, go to examples, npm i, npm run start and I found next files:

bundle-7c3eb3d0c53e714ec52ed127228f3dca.js
html>?

Expected index.html.
Actual: html>?

Also, in my project I got next files:

bundle-49e343424623b366c24fd9d0ed9cdcb5.js
bundle-[hash].js.map
html>

Expected: bundle-49e343424623b366c24fd9d0ed9cdcb5.map.js
Actual: bundle-[hash].js.map

Since the release of version 1.0.0 some of the hooks are deprecated. See: https://github.com/rollup/rollup/releases/tag/v1.0.0
I am getting the following warning in the console:

html plugin: The onwrite hook used by plugin html is deprecated.  
The generateBundle hook should be used instead.

I'm getting

[!] TypeError: Path must be a string. Received undefined

I think it's because i'm trying to use experimentalCodeSplitting and instead of a single output we i'm making an array

export default [{
	experimentalCodeSplitting: true,
	input: ['app/scripts/main.js', 'app/scripts/login.js'],
	output: {
		format: 'cjs',
		name: 'bundle-[hash]',
		sourcemap: true,
		dir: 'app/dist',
		entryNames: '[alias]-[hash].js'
	},
	plugins: [
	html({
		template: 'app/templates/index.html',
		filename: 'index.html'
	})
        ]
}]

Most browsers now support <script type="module">
It would be great if this were an options for this utility.

Sure, ideally it would somehow know which to use for which, but to begin with I figure:
a) a setting for all generated bundles to use
b) a setting for externals [or per external?]

Seems this is not compatible with the latest rollup version released a few days ago.

Running [email protected] alongside [email protected] I get the following error:

[!] Error: ENOENT: no such file or directory, scandir ''
Error: ENOENT: no such file or directory, scandir ''
    at Object.fs.readdirSync (fs.js:910:18)
    at traverse (/Users/lirsacc/projects/sample-project/node_modules/rollup-plugin-fill-html/dist/index.cjs.js:102:20)
    at Object.onwrite (/Users/lirsacc/projects/sample-project/node_modules/rollup-plugin-fill-html/dist/index.cjs.js:162:4)
    at /Users/lirsacc/projects/sample-project/node_modules/rollup/dist/rollup.js:10609:40
    at next (/Users/lirsacc/projects/sample-project/node_modules/rollup/dist/rollup.js:148:27)
    at /Users/lirsacc/projects/sample-project/node_modules/rollup/dist/rollup.js:152:48
    at <anonymous>

I've tracked it down to https://github.com/alwaysonlinetxm/rollup-plugin-fill-html/blob/master/src/index.js#L32 where config.dest is now undefined and the file path is now available under config.file. I guess this applies to the multi-targets case a couple lines down as well.

Some details on the config changes can be found in this gist according to rollup's changelog.

Sorry for the noise in case you're already working on that; if not I could also make a PR with a fix if I find some time over the weekend.

Feature Request

Consider supporting the async and defer attributes in the script tag.

References

<script>: The Script element.

I like simplicity of implementing hashing, unfortunately it doesn't work in Windows. It uses hardcoded segment separator ('/') instead of path.sep.

ENOENT: no such file or directory, scandir 'C:\xxx\dist\bundle.7052a28fe691982e9d8e3649e7e9ff7d.j'
Error: ENOENT: no such file or directory, scandir 'C:\xxx\dist\bundle.7052a28fe691982e9d8e3649e7e9ff7d.j'
at Error (native)
at Object.fs.readdirSync (fs.js:951:18)
at traverse (C:\xxx\node_modules\rollup-plugin-fill-html\dist\index.cjs.js:102:20)
at Object.onwrite (C:\xxx\node_modules\rollup-plugin-fill-html\dist\index.cjs.js:157:7)
at C:\xxx\node_modules\rollup\src\rollup.js:123:38
at next (C:\xxx\node_modules\rollup\src\utils\promise.js:6:10)
at C:\xxx\node_modules\rollup\src\utils\promise.js:10:33
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki
error Command failed with exit code 1.

The plugin will add the bundle like src="app.js".

But I'm building a single page application, where refreshing the browser at any path will always server the same page. E.g. /a/b/c always serves the same index.html.

Because the path is relative app.js. The page cannot find the bundle. Could you add a config option to add this as absolute path? e.g. /app.js

Hello,
I've noticed html isn't copied in the right place when using nested directories in output path.
Here's a fork showing the bug (you'll have to run your example): https://github.com/AlexandreBonaventure/rollup-plugin-fill-html

You'll see that:
index.html -> /bug/dist/index.html
What is expected ?
That index.html is at the same location than the bundle so :
index.html -> /bug/dist/simple/index.html