-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
rollup build bundles to support umd and esm
- Loading branch information
1 parent
c79515e
commit 99ab0c8
Showing
13 changed files
with
944 additions
and
20 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import { resolve } from 'path' | ||
| import sourceMaps from 'rollup-plugin-sourcemaps' | ||
| import nodeResolve from 'rollup-plugin-node-resolve' | ||
| import json from 'rollup-plugin-json' | ||
| import commonjs from 'rollup-plugin-commonjs' | ||
| import replace from 'rollup-plugin-replace' | ||
| import uglify from 'rollup-plugin-uglify-es' | ||
| import { terser } from 'rollup-plugin-terser' | ||
| import { getIfUtils, removeEmpty } from 'webpack-config-utils' | ||
|
|
||
| import pkg from './package.json' | ||
|
|
||
| const env = process.env.NODE_ENV || 'development' | ||
| const { ifProduction } = getIfUtils(env) | ||
|
|
||
| const LIB_NAME = pascalCase(normalizePackageName(pkg.name)) | ||
| const ROOT = resolve(__dirname, '.') | ||
| const DIST = resolve(ROOT, 'dist') | ||
|
|
||
| /** | ||
| * Object literals are open-ended for js checking, so we need to be explicit | ||
| */ | ||
| const PATHS = { | ||
| entry: { | ||
| esm5: resolve(DIST, 'esm5'), | ||
| esm2018: resolve(DIST, 'esm2018'), | ||
| }, | ||
| bundles: resolve(DIST, 'bundles'), | ||
| } | ||
|
|
||
|
|
||
| // helpers | ||
|
|
||
| function dashToCamelCase(myStr) { | ||
| return myStr.replace(/-([a-z])/g, (g) => g[1].toUpperCase()) | ||
| } | ||
|
|
||
| function toUpperCase(myStr) { | ||
| return `${myStr.charAt(0).toUpperCase()}${myStr.substr(1)}` | ||
| } | ||
|
|
||
| function pascalCase(myStr) { | ||
| return toUpperCase(dashToCamelCase(myStr)) | ||
| } | ||
|
|
||
| function normalizePackageName(rawPackageName) { | ||
| const scopeEnd = rawPackageName.indexOf('/') + 1 | ||
|
|
||
| return rawPackageName.substring(scopeEnd) | ||
| } | ||
|
|
||
| function getOutputFileName(fileName, isProd = false) { | ||
| return isProd ? fileName.replace(/\.js$/, '.min.js') : fileName | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| const external = Object.keys(pkg.peerDependencies||{}) || [] | ||
|
|
||
| const plugins = ([ | ||
| // Allow json resolution | ||
| json(), | ||
|
|
||
| // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs) | ||
| commonjs(), | ||
|
|
||
| // Allow node_modules resolution, so you can use 'external' to control | ||
| // which external modules to include in the bundle | ||
| // https://github.com/rollup/rollup-plugin-node-resolve#usage | ||
| nodeResolve(), | ||
|
|
||
| // Resolve source maps to the original source | ||
| sourceMaps(), | ||
|
|
||
| // properly set process.env.NODE_ENV within `./environment.ts` | ||
| replace({ | ||
| exclude: 'node_modules/**', | ||
| 'process.env.NODE_ENV': JSON.stringify(env), | ||
| }), | ||
| ]) | ||
|
|
||
| const CommonConfig = { | ||
| input: {}, | ||
| output: {}, | ||
| inlineDynamicImports: true, | ||
| // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash') | ||
| external, | ||
| } | ||
|
|
||
| const UMDconfig = { | ||
| ...CommonConfig, | ||
| input: resolve(PATHS.entry.esm5, 'index.js'), | ||
| output: { | ||
| file: getOutputFileName( | ||
| resolve(PATHS.bundles, `${LIB_NAME}.umd-es5.js`), | ||
| ifProduction() | ||
| ), | ||
| format: 'umd', | ||
| name: LIB_NAME, | ||
| sourcemap: true, | ||
| }, | ||
| plugins: removeEmpty(([...plugins, ifProduction(uglify())]) | ||
| ), | ||
| } | ||
|
|
||
| const FESMconfig = { | ||
| ...CommonConfig, | ||
| input: resolve(PATHS.entry.esm2018, 'index.js'), | ||
| output: [ | ||
| { | ||
| file: getOutputFileName( | ||
| resolve(PATHS.bundles, `${LIB_NAME}.esm-es2018.js`), | ||
| ifProduction() | ||
| ), | ||
| format: 'es', | ||
| sourcemap: true, | ||
| }, | ||
| ], | ||
| plugins: removeEmpty( | ||
| ([...plugins, ifProduction(terser())]) | ||
| ), | ||
| } | ||
|
|
||
| export default [UMDconfig | ||
| , FESMconfig | ||
| ] | ||
|
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 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 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 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 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <title>test dist/bundles/index.esm.js</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <style> | ||
| textarea{ | ||
| width: 100%; | ||
| height: 250px; | ||
| } | ||
| input{ | ||
| width: 100% | ||
| } | ||
| </style> | ||
|
|
||
| <h1>Testing /dist/bundles/index.esm.js import directly from html page </h1> | ||
| <div> | ||
| <p>Image URL: </p> | ||
| <input id="imageUrl" type="text" value="../rotate/FriedrichNietzsche.png"> | ||
| </div> | ||
| <div> | ||
| <p>Commands. </p> | ||
| <textarea id="commandText"> | ||
| convert FriedrichNietzsche.png -rotate 33 -resize 100x90! out.png | ||
| convert out.png -charcoal 1 charcoal1.gif | ||
| convert out.png -charcoal 2 charcoal2.gif | ||
| convert \ | ||
| charcoal1.gif \ | ||
| \( \ | ||
| -clone 0 charcoal2.gif -compose difference \ | ||
| -composite -threshold 5% -fill red \ | ||
| -opaque white -transparent black \ | ||
| \) \ | ||
| -compose over -composite \ | ||
| pcharcoaldiff.png | ||
| </textarea> | ||
| </div> | ||
|
|
||
| <button id="execute">Execute</button> | ||
|
|
||
| <div id="imagesContainer"></div> | ||
| <script type="module"> | ||
|
|
||
| // import { execute, loadImageElement, buildInputFile } from '../../dist/bundles/index.esm.js' | ||
| import { execute, loadImageElement, buildInputFile } from '../../dist/bundles/index.esm.js' | ||
|
|
||
| async function renderImages(images) { | ||
| document.querySelector('#imagesContainer').innerHTML = '' | ||
| images.forEach(async imageFile => { | ||
| const container = document.createElement('div') | ||
| container.innerText = `"${imageFile.name}" : ` | ||
| const img = document.createElement('img') | ||
| img.alt = img.title = imageFile.name | ||
| container.appendChild(img) | ||
| document.querySelector('#imagesContainer').appendChild(container) | ||
| await loadImageElement(imageFile, img) | ||
| }) | ||
| } | ||
|
|
||
| export async function main() { | ||
| const input = await buildInputFile(document.querySelector('#imageUrl').value) | ||
| const commands = document.querySelector('#commandText').value | ||
| const result = await execute({ inputFiles: [input], commands }) | ||
| await renderImages([input].concat(result.outputFiles)) | ||
| } | ||
|
|
||
| document.querySelector('#execute').addEventListener('click', main) | ||
|
|
||
| main() | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "extends": "./tsconfig-esm5.json", | ||
| "compilerOptions": { | ||
| "target": "es2018", | ||
| "outDir": "dist/esm2018" | ||
| } | ||
| } |
Oops, something went wrong.