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

View Code? Open in Web Editor NEW

17.0 2.0 14.0 48 KB

fill the html template with the bundle js..

License: MIT License

JavaScript 100.00%

rollup-plugin-fill-html's Introduction

rollup-plugin-fill-html

Fill the html template with the bundle js..

Note

Rollup >= 0.48 has been supported since v1.0.6. So if you use rollup < 0.48, please choose the older version.

The 1.0.3 version has support to insert css file and external url, you should know that rollup-plugin-fill-html will scan the dest directory and find out all the js and css files, and then insert these files into the result html. So you'd better to clean the dest directory before rebuilding, and I think you may need this .

Installation

yarn add --dev rollup-plugin-fill-html

npm install -D rollup-plugin-fill-html

Usage

In the rollup.config.js:

import html from 'rollup-plugin-fill-html';

export default {
  entry: 'src/index.js',
  dest: 'dist/bundle.js',
  plugins: [
    html({
      template: 'src/index.html',
      filename: 'index.html'
    })
  ]
};

and then a index.html file will be created in the dest directory(where the bundle file will be).

Hash

With rollup-plugin-fill-html, you can set a format string which with '[hash]' for the dest in rollup.config.js, just like:

export default {
  entry: 'src/index.js',
  dest: 'dist/bundle-[hash].js',
  plugins: [
    ...
  ]
};

and then, you will get bundle-a3965c0c77a63d7c74b57222e2f74028.js in your dist directory.

Externals

Since v1.0.3, rollup-plugin-fill-html has support to include external files. You can set an externals option to list your files which you want to include.

Options

You can pass an option to the html() just like above, and there are some options:

template: Required. the path of the template file, it should be a html file.
filename: Optional. the name of the result html file, if omitted, the template name will be used.
externals: Optional. a list of files which will be insert into the resule html. The file should be a valid url.
inject: Optional. indicate where to insert files， it can be 'head' or 'body'. For default, the css files will be inserted into <head> and the js files will be inserted into <body>.
defaultmode: Optional. specify a value to use in the script type attribute. If no mode is specified, the type attribute is omitted. Externals can optionally override this per file.

demo:

// rollup.config.js
import html from 'rollup-plugin-fill-html';

export default {
  entry: 'src/index.js',
  dest: 'dist/bundle.js',,
  plugins: [
    html({
      template: 'src/index.html',
      filename: 'index.html',
      externals: [
        // the type can be 'js' or 'css',
        // and you can pass a pos field to control the the position in which the file will be inserted.
        // the xxxx1.js will be inserted before the bundle,
        // and the xxxx2.js will be inserted after the bundle as default
        // you can set an `inject` field here to cover the outer `inject`
        { type: 'js', file: '//xxxx1.js', pos: 'before' },
        { type: 'js', file: '//xxxx2.js', mode: 'module' }
      ]
    })
  ]
};

then the dist/bundle.js will be inserted into the result file.

License

MIT

rollup-plugin-fill-html's People

Contributors

Stargazers

Watchers

Forkers

jacovc86 lirsacc alexandrebonaventure funkybob haifeng2013 fer0x kenfoo integral osiloke daftgopher jimdefrisco bodengdd01 icek

rollup-plugin-fill-html's Issues

ENOENT: no such file or directory in Windows

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.

Absolute path for SPAs

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

Breaks under latest rollup version due to change in configuration structure

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.

Wrong html output filename, sourcemap not hashed

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

experimentalCodeSplitting Path must be a string. Received undefined

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'
	})
        ]
}]

Async Defer

Feature Request

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

References

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

Something wrong when rollup.config.js export an array

// 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