Last active
January 30, 2024 15:30
-
-
Save EpicKiwi/3e6d007183f60da240af2d240200da57 to your computer and use it in GitHub Desktop.
Rollup config for an Open and Unintrusive Web
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This Rollup config file intend to compile each TypeScript file of | |
// a source folder without too much modification. | |
// Goal is to make the resulting code easy to read for beginner, debuggers or curious persons | |
// wanting to see the full source code. | |
// | |
// Typescript targets esnext and doesn't changes too much the resulting files | |
// Modules are resolved including node_modules compiled into ES Modules | |
// Original source files are copied to output directory | |
// Header are added to generated files to hint a visitor about the original file | |
// | |
// We got the full power of npm, Typescript and all other Rollups plugins | |
// Without too much obfucation on the resulting files | |
import resolve from "@rollup/plugin-node-resolve"; | |
import commonjs from "@rollup/plugin-commonjs"; | |
import { fileURLToPath } from "node:url"; | |
import typescript from "@rollup/plugin-typescript"; | |
import json from "@rollup/plugin-json" | |
import copy from "rollup-plugin-copy"; | |
import nodePolyfills from "rollup-plugin-node-polyfills" | |
import {glob} from "glob"; | |
import { resolve as pathResolve } from "node:path"; | |
import * as os from "node:os" | |
// Set folder where uncompiled source are located | |
let sourceFolder = fileURLToPath(new URL("./src/", import.meta.url)); | |
let copyFolder = `${sourceFolder}/*` | |
if(os.platform() == "win32") { | |
copyFolder = copyFolder.replace(/\\/g, "/"); | |
} | |
// Extract all typescript files | |
let sources_files = Object.fromEntries( | |
glob | |
.sync(`${sourceFolder}/**/*.ts`) | |
.map((it) => [pathResolve(it).replace(sourceFolder, "").replace(/\.[^.]+$/, ""), it]) | |
); | |
export default { | |
input: sources_files, | |
output: { | |
banner: getHeader, | |
format: "es", | |
dir: "out", | |
manualChunks: file_chunking, | |
chunkFileNames: "[name].js", | |
}, | |
plugins: [ | |
// Copy all sources into the public directory | |
copy({ | |
targets: [{ src: copyFolder, dest: "out" }], | |
}), | |
// Resolve npm modules | |
resolve({browser: true, preferBuiltins: false}), | |
// Handle non ESM modules | |
commonjs(), | |
nodePolyfills(), | |
json(), | |
// Compile typescript | |
typescript({ | |
allowSyntheticDefaultImports: true, | |
compilerOptions: { | |
lib: ["es5", "es6", "dom", "esnext"], | |
target: "esnext", | |
}, | |
}), | |
], | |
}; | |
// Force code chunking for each file | |
function file_chunking(id) { | |
if (id.includes("node_modules")) { | |
return id | |
.replace(/^.+\/node_modules\//, "lib/vendor/") | |
.replace(/([^.])\.[^.]+$/, "$1"); | |
} else if (id.startsWith(sourceFolder)) { | |
let name = id.replace(sourceFolder, "").replace(/([^.])\.[^.]+$/, "$1"); | |
if (id.endsWith(".js")) { | |
name += ".bundle"; | |
} | |
return name; | |
} | |
} | |
// Generate a header pointing to the original file (only for file inside source folder) | |
function getHeader(chunk) { | |
let files = Object.keys(chunk.modules) | |
.filter((it) => !it.startsWith("\x00")) | |
.filter((it) => it.startsWith(sourceFolder)) | |
.map((it) => it.replace(sourceFolder, "")); | |
if (files.length > 1) { | |
return `// This file was generated using Rollup from the following files : | |
${files.map((it) => `// * ${it}`)} | |
// | |
// Take a look at these files to get the original source code | |
`; | |
} else if (files.length == 1) { | |
return `// This file was generated using Rollup from "${files[0]}" | |
// Take a look this file to see the original source code | |
`; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript @rollup/plugin-json rollup-plugin-copy rollup-plugin-node-polyfills glob tslib |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment