Rollup plugin for inline scripts into code
This Rollup plugin is like raw-loader plugin for Webpack
- Easy to use (simple configuration)
- Fully customizable: you can adjust it for yourself 🦖
- Suitable for inline JavaScript, TypeScript, SVG files (and any assets)
- Typescript code highlighting works 🔥
- Tests with Node.js 12, 14, 16 👍
npm i rollup-plugin-inline-codeStart by updating your rollup.config.js file
rollup.config.js
import inlineCode from 'rollup-plugin-inline-code'
export default {
input: ...,
output: ...,
plugins: [inlineCode()],
}Then modify the import with the prefix inline!
Any JavaScript or TypeScript file of your project
import html from 'common-tags/lib/html' // Optional template literal tag function to remove spaces inside HTML-like string
import INLINE_SCRIPT from 'inline!./src/assets/inline.js' // Note the extension is important here (not to be missed)
import INLINE_SVG from 'inline!./src/assets/sample.svg'
...
return html`
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<!-- Inline Script -->
<script>
${INLINE_SCRIPT}
</script>
<!-- Inline SVG -->
${INLINE_SVG}
...
</body>
</html>
`
...This rollup-plugin-inline-code replaces INLINE_SCRIPT and INLINE_SVG with file contents, success 🎊
You can simply fix the code highlighting when importing into Typescript files. To do this, you need to declare a global module
src/typings/global.d.ts
declare module 'inline!*' {
const inlineCode: string
export default inlineCode
}Then you need to modify tsconfig.json to set global typings path with the typeRoots option
tsconfig.json
{
"compilerOptions": {
...
"typeRoots": ["node_modules/@types", "src/typings/global.d.ts"]
...
},
...
}That's it, restart your TypeScript server and see no import errors 🎉
P.S. To restart the TypeScript server in VSCode, you need to open search (Cmd+P on MacOS) and then type TypeScript: Restart TS server with any open TypeScript file
| Name | Type | Default | Description |
|---|---|---|---|
| prefix | string | inline! |
Custom prefix to detect inline code |
To use parameters, pass them in rollup.config.js as shown below
rollup.config.js
...
plugins: [inlineCode({ prefix: 'myCustomPrefix!' })]
...MIT © Denis Stasyev