npm

Need private packages and team management tools?Check out npm Orgs. »

bundle-cli

0.3.0 • Public • Published

bundle-cli

This CLI simplify the development of packages or applications, thanks to the use of rollup, adding to this:

Observers of files (html, js and css) based on expressions, for the generation of inputs to work by rollup, eg:

bundle src/*.html,src/*.js,src/css/*.css

construction of html files, which share chunk type dependencies of the js imported by the tag script[type=module] locally, eg:

input:index.html

<script src="./a.js" type="module"></script>
<script src="./a.js" type="module"></script>

output:index.html

<script src="./index.js" type="module"></script>

construction of css files when declared as input, if not declared as input, it will return the css as text processed by postcss, eg:

import style "./style.css";
console.log(style) //content of style.css, ideal for web-components

the alRule import are grouped in the export file

default settings

bundle-cli, makes use of the following plugin:

**rollup-plugin-resolve **: allows to maintain a node.js style import

rollup-plugin-babel: supports its configuration from the package.json by reading from this babel.presets andbabel.plugins, by default it attaches, @babel/preset-env and @babel/plugin-transform-react-jsx with pagma h.

postcss: bundle-cli, only supports css, but to enhance its use, add postcss-preset-env andcssnano by default.

rollup-plugin-terser and @atomico/rollup-plugin-sizes

los plugins de mitificación solo operan en modo build.

cli

  Usage
    $ bundle [src] [dest] [options]
 
  Options
    -w, --watch       Watch files in bundle and rebuild on changes  (default false)
    -e, --external    Does not include dependencies in the bundle  (default false)
    --shimport        enable the use of shimport in the html  (default false)
    --browsers        define the target of the bundle  (default last 2 versions)
    -v, --version     Displays current version
    -h, --help        Displays this message
 
  Examples
    $ bundle src/index.js dist --watch
    $ bundle src/*.js dist
    $ bundle src/*.html
    $ bundle

Use example

Simple export of web-components and preview of this.

project directory

/src
    /web-components
        /ui-a
            ui-a.js
        /ui-b
            ui-b.js
        /ui-c
            ui-c.js
    /input.html

bundle-cli for preview

bundle src/index.html public -w

web-components export bundle

bundle src/web-components/**/*.js --external

--external allows rollup to ignore dependencies and peerDependencies.

todo

  • read from the html the styles used locally and generate a bundle that groups them to be then grafted into the html
  • add tests on the cli, to verify bundle integration.
  • minificar el html generado
  • add support to a server that supports the issuance of updates, can be activated under the prefix --server
  • add shortcut to unpkg shortcut to simplify import, eg import anyModule from "unpkg.com/any-module", this must change the amount if defined as external, eg import anyModule from "https://unpkg.com/any-module/any-module.es.js"

Keywords

none

install

npm i bundle-cli

Downloadsweekly downloads

33

version

0.3.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability