Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/haifeng2013/rollup-plugin-bundle-html

Last synced: 3 months ago
JSON representation

Host: GitHub
URL: https://github.com/haifeng2013/rollup-plugin-bundle-html
Owner: haifeng2013
License: mit
Created: 2018-08-21T10:31:55.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-01-12T09:50:41.000Z (almost 2 years ago)
Last Synced: 2024-03-14T15:26:57.221Z (8 months ago)
Language: JavaScript
Size: 140 KB
Stars: 26
Watchers: 3
Forks: 11
Open Issues: 28
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome - bundle-html - Inject the bundle js/css files as well as external js/css files to html template. (Plugins / Output)

README

# rollup-plugin-bundle-html
This plugin inject the bundle js file as well as external js files to html template.
This plugin extends from [rollup-plugin-fill-html](https://github.com/alwaysonlinetxm/rollup-plugin-fill-html) to provide
more flexibility for injecting files.

## Installation

yarn add --dev rollup-plugin-bundle-html

npm install -D rollup-plugin-bundle-html

## Usage
```js
import html from 'rollup-plugin-bundle-html';

export default {
input: 'src/main.js',
output: {
file: 'dist/foo/bundle.js',
},
plugins: [
html({
template: 'src/template.html',
// or html code: ''
dest: "dist/foo",
filename: 'index.html',
inject: 'head',
externals: [
{ type: 'js', file: "file1.js", pos: 'before' },
{ type: 'js', file: "file2.js", pos: 'before' }
]
})
]
};
```

```html

```

## Hash

You can set string '[hash]' for output file in rollup.config.js, and your bundle and source map (if you turned on
sourcemap option) will have the string '[hash]' be replaced by its hash.
```js
export default {
input: 'src/main.js',
output: {
file: 'dist/foo/bundle-[hash].js',
// Turn on sourcemap
sourcemap: true
},
plugins: [
...
]
};
```
You will find both bundle and map files are hashed and placed in your `dist/foo` folder:
`bundle-76bf4fb5dbbd62f0fa3708aa3d8a9350.js`, `bundle-84e0f899735b1e320e625c9a5c7c49a7.js.map`

## onlinePath

You can set 'onlinePath' as anything like `//www.sohu.com/` if you want to put the files on CDN after building.

```js
{
output: {
file: 'dist/foo/main.js',
},
// ...
plugins: [
html({
dest: "dist/foo",
// ...
onlinePath: '//www.sohu.com/dist/foo'
})
]
}
```

and you will get something like: ``.

## Options

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

- __template__: (*required*) either path or code string of the template file, template should
be a html file.
- __filename__: *optional* if 'template' is a path: the name of the result html file, if omitted,
will use name in template as file name.
- __externals__: (*optional*) a list of files which will be insert into the resule
html. The file should be a valid url.
- externals.__file__: file path.
- externals.__type__: the type of file. can be 'js' or 'css'.
- externals.__pos__: position where the file is inserted.
- externals.__timestamp__: append timestamp as query string to file path.
- __inject__: (*optional*) indicate where to insert files， it can be 'head' or
'body'. For default, the css files will be inserted into `` and the js
files will be inserted into ``.
- __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.
- __dest__: (*optional*) the folder in which js file is searched and be injected to html file.
- __absolute__: (*optional*) indicates is paths of injected files should starts with "/".
- __ignore__: (*optional*) specify a regex that will prevent all matching files from being injected.
- __onlinePath__: (*optional*) add an onlinePath prefix to the file while bundle file would be
pushed into CDN instead of a local file.

## License

MIT