ESM-Dep-Bundler
Just write JavaScript and let ESM-Dep-Bundler fully prepare your dependencies.
Features
- Scans your files for dependencies via
import
andexport
statements. - Installs NPM dependencies for you (via NPM via CLI via
child_process
). - Uses Rollup to compile your dependencies into a deployable folder ("web_modules").
- Supports version in dependency names (to be cache-friendly).
- Has built-in development web-server for your convenience.
Usage / Sample
-
npm i -P esm-dep-bundler
-
Add this to
package.json
:"ESM-Dep-Bundler":,The
fileAliases
key is for when a package has a non-browser entry point. In this case, styled-components's package.json hasmain
andmodule
keys that point to JS files that assume a Node.js environment. ESM-Dep-Bundler (via Rollup) can't work with that, since it requires Node.js modules. Instead of doing what webpack does and providing polyfills, ESM-Dep-Bundler allows you to just specify a browser-compatible file.The
npmAliases
key allows you to specify where an NPM package should be installed from. It uses the same syntax as the NPM CLI, which it literally shells out to. In this example, it installs Rollup-compatible versions of 'react' and 'react-dom' from NPM, so that any time your code or any of your dependencies import React, it'll see this version instead. -
npx esm-dep-bundler
-
Create these files:
-
public/index.js
Test -
public/app/main.js
;;;;;{return html`Hello !`;}{const count increase = ;return html`Count: +1`;}{const name setName = React;const changeName = {;};return html`</>Greet:< name=/>`;}ReactDOM; -
public/app/util.js
;{const count setCount = React;const increase = ;return count increase;} -
public/app/deps.js
;;
-
CLI
$ npx esm-dep-bundler --helpOptions:--help Show help [boolean]--version Show version number [boolean]--include-pattern, -i A 'glob' to match JS/TS files to search for ESMimports/exports, relative to <public-dir>.[default: "**/*.js"]--use-https, -s Use HTTPS for the dev-server.[boolean] [default: false]--public-dir, -p Your web server's root public directory relative toproject root. [default: "public"]--web-modules-dir, -m The name of the directory under <public-dir> thatshould contain your web modules.[default: "web_modules"]
Credits
Ideas formed in:
- https://github.com/pikapkg/web/issues/68
- https://github.com/pikapkg/web/issues/62
- https://github.com/pikapkg/web/issues/69
People who helped brainstorm it:
License
MIT