| 1 | [npm]: https://img.shields.io/npm/v/rollup-plugin-bundle-inject
|
| 2 | [npm-url]: https://www.npmjs.com/package/rollup-plugin-bundle-inject
|
| 3 | [size]: https://packagephobia.now.sh/badge?p=rollup-plugin-bundle-inject
|
| 4 | [size-url]: https://packagephobia.now.sh/result?p=rollup-plugin-bundle-inject
|
| 5 |
|
| 6 | [![npm][npm]][npm-url]
|
| 7 | [![size][size]][size-url]
|
| 8 |
|
| 9 | # rollup-plugin-bundle-inject
|
| 10 |
|
| 11 | 🍣 Inject JS or CSS bundle into a template where necessary
|
| 12 |
|
| 13 | ## Install
|
| 14 |
|
| 15 | Using npm:
|
| 16 |
|
| 17 | ```bash
|
| 18 | npm install rollup-plugin-bundle-inject --save-dev
|
| 19 | ```
|
| 20 |
|
| 21 | ## Usage
|
| 22 |
|
| 23 | Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:
|
| 24 |
|
| 25 | ```js
|
| 26 | const bundleInject = require("rollup-plugin-bundle-inject");
|
| 27 |
|
| 28 | module.exports = {
|
| 29 | input: "./src/index.js",
|
| 30 | output: {
|
| 31 | dir: "./public/dist",
|
| 32 | format: "cjs",
|
| 33 | },
|
| 34 | plugins: [
|
| 35 | bundleInject({
|
| 36 | // specify the template
|
| 37 | target: "./public/index.html",
|
| 38 | }),
|
| 39 | ],
|
| 40 | };
|
| 41 | ```
|
| 42 |
|
| 43 | Once build successfully, an HTML file should be written to the bundle output destination.
|
| 44 |
|
| 45 | ## Options
|
| 46 |
|
| 47 | ### `target`
|
| 48 |
|
| 49 | Type: `String`<br>
|
| 50 | Default: `''`
|
| 51 |
|
| 52 | Specifies the template.
|
| 53 |
|
| 54 | \_Note: This field is required, it will throw an error if you don't specify a valid value.
|
| 55 |
|
| 56 | ### `rename`
|
| 57 |
|
| 58 | Type: `String`<br>
|
| 59 | Default: `''`
|
| 60 |
|
| 61 | Rename the output template.
|
| 62 |
|
| 63 | ## Example
|
| 64 |
|
| 65 | By default, CSS bundle will inject into the end of the `<head>`, JS bundle will inject into the end of the `<body>`.
|
| 66 |
|
| 67 | ```html
|
| 68 | <!DOCTYPE html>
|
| 69 | <html>
|
| 70 | <head>
|
| 71 | <title>Rollup bundle inject example</title>
|
| 72 | <meta charset="utf-8" />
|
| 73 | <style>
|
| 74 | /* Content of bundle.css will goes here */
|
| 75 | </style>
|
| 76 | </head>
|
| 77 | <body>
|
| 78 | <h1>Hello World!</h1>
|
| 79 | <script>
|
| 80 | /* Content of bundle.js will goes here */
|
| 81 | </script>
|
| 82 | </body>
|
| 83 | </html>
|
| 84 | ```
|
| 85 |
|
| 86 | you could decide where should be the bundle injected, by using the tag `<!-- inject:css -->` and `<!-- inject:js -->`.
|
| 87 |
|
| 88 | ```html
|
| 89 | <!DOCTYPE html>
|
| 90 | <html>
|
| 91 | <head>
|
| 92 | <title>Rollup bundle inject example</title>
|
| 93 | <meta charset="utf-8" />
|
| 94 | <!-- inject:css -->
|
| 95 | <link type="text/css" rel="stylesheet" href="bootstrap.css" />
|
| 96 | <script src="jquery.js"></script>
|
| 97 | <!-- inject:js -->
|
| 98 | </head>
|
| 99 | <body>
|
| 100 | <h1>Hello World!</h1>
|
| 101 | </body>
|
| 102 | </html>
|
| 103 | ```
|