|
| 1 | +# Bundle [![License][LicenseIMGURL]][LicenseURL] [![NPM version][NPMIMGURL]][NPMURL] [![Build Status][BuildStatusIMGURL]][BuildStatusURL] [![Coverage Status][CoverageIMGURL]][CoverageURL] |
| 2 | + |
| 3 | +[NPMURL]: https://npmjs.org/package/@putout/bundler "npm" |
| 4 | +[NPMIMGURL]: https://img.shields.io/npm/v/@putout/bundler.svg?style=flat&longCache=true |
| 5 | +[BuildStatusURL]: https://github.com/putoutjs/printer/actions/workflows/nodejs.yml "Build Status" |
| 6 | +[BuildStatusIMGURL]: https://github.com/putoutjs/printer/actions/workflows/nodejs.yml/badge.svg |
| 7 | +[LicenseURL]: https://tldrlegal.com/license/mit-license "MIT License" |
| 8 | +[LicenseIMGURL]: https://img.shields.io/badge/license-MIT-317BF9.svg?style=flat |
| 9 | +[CoverageURL]: https://coveralls.io/github/putoutjs/printer?branch=master |
| 10 | +[CoverageIMGURL]: https://coveralls.io/repos/putoutjs/printer/badge.svg?branch=master&service=github |
| 11 | + |
| 12 | +## Install |
| 13 | + |
| 14 | +``` |
| 15 | +npm i @putout/bundle |
| 16 | +``` |
| 17 | + |
| 18 | +## Convert ESM to CommonJS |
| 19 | + |
| 20 | +To Simplify things up all files converted to CommonJS first. |
| 21 | +Let's suppose none of them use top-level await to get things simpler. |
| 22 | + |
| 23 | +## Parse filenames |
| 24 | + |
| 25 | +Traverse all files starting from `entry` and get all filenames. |
| 26 | + |
| 27 | +- [`parse-require`](https://putout.cloudcmd.io/#/gist/d973366be6b07ab705b5c9d793369904/ca8b6b15fa953d95f57b42e07136c65791f38ca1); |
| 28 | +- [`parse-filenames`](https://putout.cloudcmd.io/#/gist/d973366be6b07ab705b5c9d793369904/3067150ad161029e75b95e9bfff290e03953ef41); |
| 29 | +- [`resolve-filenames`](https://putout.cloudcmd.io/#/gist/8ca1ac9b5fb4d1a47d185836c3f0b393/edf99b8064fe0faf4545aa0cc66138a7fa34c557); |
| 30 | +- [`resolve-require`](https://putout.cloudcmd.io/#/gist/833539f66cb238fcc3b6ca6cee61ef9e/79a068c96b686bb0eacdf3f570d532981499b114); |
| 31 | +- [`bundle-files`](https://putout.cloudcmd.io/#/gist/7dd3bffa8e88f7542c84065f622b63d7/3b1e68e0babc3a72af947076ed9801c0034a096e); |
| 32 | + |
| 33 | +## Bundle all files to object |
| 34 | + |
| 35 | +Traverse filesystem and create object that contains filename and file content: |
| 36 | + |
| 37 | +```js |
| 38 | +const __filesystem = { |
| 39 | + '/entry.js': () => { |
| 40 | + const client = require('/client.js'); |
| 41 | + console.log(client); |
| 42 | + }, |
| 43 | + '/client.js': (exports, require, module) => { |
| 44 | + module.exports = 'hello'; |
| 45 | + }, |
| 46 | +}; |
| 47 | +``` |
| 48 | + |
| 49 | +## IIFE |
| 50 | + |
| 51 | +Most likely we need IIFE so couple bundles can be loaded on page simultaneously. |
| 52 | + |
| 53 | +## Result Example |
| 54 | + |
| 55 | +```js |
| 56 | +const __modules = {}; |
| 57 | +const __filesystem = { |
| 58 | + '/entry.js': () => { |
| 59 | + const client = require('/client.js'); |
| 60 | + console.log(client); |
| 61 | + }, |
| 62 | + '/client.js': (exports, require, module) => { |
| 63 | + module.exports = 'hello'; |
| 64 | + }, |
| 65 | +}; |
| 66 | + |
| 67 | +const require = (name) => { |
| 68 | + const exports = {}; |
| 69 | + const module = { |
| 70 | + exports, |
| 71 | + }; |
| 72 | + |
| 73 | + if (__modules[name]) |
| 74 | + return __modules[name]; |
| 75 | + |
| 76 | + __filesystem[name](exports, require, module); |
| 77 | + __modules[name] = module.exports; |
| 78 | + |
| 79 | + return module.exports; |
| 80 | +}; |
| 81 | + |
| 82 | +require('/entry.js'); |
| 83 | +``` |
| 84 | + |
| 85 | +## License |
| 86 | + |
| 87 | +MIT |
0 commit comments