{"id":13774822,"url":"https://github.com/haifeng2013/rollup-plugin-bundle-html","last_synced_at":"2025-05-11T07:30:41.710Z","repository":{"id":32901793,"uuid":"145548776","full_name":"haifeng2013/rollup-plugin-bundle-html","owner":"haifeng2013","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-12T09:50:41.000Z","size":143,"stargazers_count":27,"open_issues_count":28,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T02:17:04.228Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haifeng2013.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-21T10:31:55.000Z","updated_at":"2024-03-19T16:31:30.000Z","dependencies_parsed_at":"2023-01-14T22:35:26.936Z","dependency_job_id":null,"html_url":"https://github.com/haifeng2013/rollup-plugin-bundle-html","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haifeng2013%2Frollup-plugin-bundle-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haifeng2013%2Frollup-plugin-bundle-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haifeng2013%2Frollup-plugin-bundle-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haifeng2013%2Frollup-plugin-bundle-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haifeng2013","download_url":"https://codeload.github.com/haifeng2013/rollup-plugin-bundle-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253533021,"owners_count":21923349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:01:30.687Z","updated_at":"2025-05-11T07:30:41.416Z","avatar_url":"https://github.com/haifeng2013.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Output"],"readme":"# rollup-plugin-bundle-html\nThis plugin inject the bundle js file as well as external js files to html template.\nThis plugin extends from [rollup-plugin-fill-html](https://github.com/alwaysonlinetxm/rollup-plugin-fill-html) to provide\nmore flexibility for injecting files.\n\n## Installation\n\n    yarn add --dev rollup-plugin-bundle-html\n\nor\n\n    npm install -D rollup-plugin-bundle-html\n\n## Usage\n```js\nimport html from 'rollup-plugin-bundle-html';\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    file: 'dist/foo/bundle.js',\n  },\n  plugins: [\n    html({\n        template: 'src/template.html',\n        // or html code: '\u003chtml\u003e\u003chead\u003e\u003c/head\u003e\u003cbody\u003e\u003c/body\u003e\u003c/html\u003e'\n        dest: \"dist/foo\",\n        filename: 'index.html',\n        inject: 'head',\n        externals: [\n            { type: 'js', file: \"file1.js\", pos: 'before' },\n            { type: 'js', file: \"file2.js\", pos: 'before' }\n        ]\n    })\n  ]\n};\n```\n\n```html\n\u003c!-- src/template.html --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n\u003c!-- dist/foo/index.html --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"../../file1.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"../../file2.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"bundle.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Hash\n\nYou can set string '[hash]' for output file in rollup.config.js, and your bundle and source map (if you turned on\nsourcemap option) will have the string '[hash]' be replaced by its hash.\n```js\nexport default {\n  input: 'src/main.js',\n  output: {\n    file: 'dist/foo/bundle-[hash].js',\n    // Turn on sourcemap\n    sourcemap: true\n  },\n  plugins: [\n    ...\n  ]\n};\n```\nYou will find both bundle and map files are hashed and placed in your `dist/foo` folder:\n `bundle-76bf4fb5dbbd62f0fa3708aa3d8a9350.js`, `bundle-84e0f899735b1e320e625c9a5c7c49a7.js.map`\n\n## onlinePath\n\nYou can set 'onlinePath' as anything like `//www.sohu.com/` if you want to put the files on CDN after building.\n\n```js\n{\n  output: {\n    file: 'dist/foo/main.js',\n  },\n  // ...\n  plugins: [\n    html({\n        dest: \"dist/foo\",\n        // ...\n        onlinePath: '//www.sohu.com/dist/foo'\n    })\n  ]\n}\n```\n\nand you will get something like: `\u003cscript src=\"//www.sohu.com/dist/foo/main.js\"\u003e\u003c/script\u003e`.\n\n## Options\n\nYou can pass an option to the `html()` just like above, and there are some options:\n\n- __template__: (*required*)  either path or code string of the template file, template should \n  be a html file.\n- __filename__: *optional* if 'template' is a path: the name of the result html file, if omitted, \n  will use name in template as file name.\n- __externals__: (*optional*) a list of files which will be insert into the resule\n  html. The file should be a valid url.\n  - externals.__file__: file path.\n  - externals.__type__: the type of file. can be 'js' or 'css'.\n  - externals.__pos__: position where the file is inserted.\n  - externals.__timestamp__: append timestamp as query string to file path.\n- __inject__: (*optional*) indicate where to insert files， it can be 'head' or\n  'body'. For default, the css files will be inserted into `\u003chead\u003e` and the js\n  files will be inserted into `\u003cbody\u003e`.\n- __defaultmode__: (*optional*) specify a value to use in the script `type` attribute.\n  If no mode is specified, the `type` attribute is omitted. Externals can\n  optionally override this per file.\n- __dest__: (*optional*) the folder in which js file is searched and be injected to html file.\n- __absolute__: (*optional*) indicates is paths of injected files should starts with \"/\".\n- __ignore__: (*optional*) specify a regex that will prevent all matching files from being injected.\n- __onlinePath__: (*optional*) add an onlinePath prefix to the file while bundle file would be \n  pushed into CDN instead of a local file.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaifeng2013%2Frollup-plugin-bundle-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaifeng2013%2Frollup-plugin-bundle-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaifeng2013%2Frollup-plugin-bundle-html/lists"}