packer-cli

Packer CLI

Full-fledged CLI tool to package library node module modules compliant with Browser and NodeJS with vanilla JS and Typescript source support.

Features

• Managed build config
• NPM
• Yarn
• Travis
• Typescript 2.x
• Babel 7.x
• TS Lint code analysis
• Precompiled handlebars templating
• Post CSS based image inline and auto prefixing
• Styling using SCSS
• SCSS Lint
• Karma
• Jasmine
• Rollup and Gulp based build process
• FESM5, FESM2015 and UMD build output
• Emmit type definitions
• Ready to publish as Node module
• Inline and bundle style
• Theme packaging
• Import path replace
• Exclude external peer dependencies
• Bundle peer dependencies
• Ignore imports
• Copy static assets to build dir

Usage

You can simply run the following command in preferred directory to generate a new project using Packer CLI,

npx packer-cli generate my-library

or

npm install packer-cli -g && packer new my-library

Once project is generated and dependencies are installed, you can use the following CLI commands:

# Run project on watch mode
npm run watch

# Production build
npm run build

# Run unit test suite on development envrionemnt watch mode
npm run test

# Run unit test suite on continues integration environment mode
npm run test:ci

Build Configuration

{
  "namespace": "ts.lib",
  "entry": "index.ts",
  "source": "src/ts",
  "out": "dist",
  "tsProject": true,
  "watch": {
    "script": ".tmp",
    "demo": "demo/watch",
    "port": 4000,
    "open": true
  },
  "copy": [
    "README.md",
    "LICENSE"
  ],
  "flatGlobals": {},
  "esmExternals": [
    "handlebars/runtime"
  ],
  "pathReplacePatterns": [
    {
      "test": "./conf/conf1",
      "replace": "./conf/conf2"
    }
  ],
  "ignore": [],
  "imageInlineLimit": 1000000,
  "assetPaths": [
    "src/assets"
  ],
  "bundleStyle": false,
  "bundleFormat": "umd"
}

Config	Type	Definition
namespace	string	application namespace to be used
entry	string	entry typescript file
source	string	source directory
out	string	build output directory
tsProject	boolean	Set true if library source is in Typescript
watch	object	watch mode configuration object
watch.script	string	watch build temp directory
watch.demo	string	watch demo page dir
watch.port	number	watch server port
watch.open	boolean	open browser automatically
copy	array of strings	List of files paths to copy on build.
flatGlobals	object	flat bundle build global dependencies. Listed will not be treated as externals.
esmExternals		ESM build external dependencies
pathReplacePatterns	array of objects	Import path replace pattern collection
pathReplacePatterns.test	string	Path to find
pathReplacePatterns.replace	string	Path to replace
ignore	array of strings	Import paths to ignore with noop implementation
imageInlineLimit	number	Inline image if image size is less than specified limit
assetPaths	array of strings	List of paths which contains static assets referenced in style sheets
bundleStyle	boolean	Inline bundle styles to build
bundleFormat	string	umd, amd, iife, system, es, cjs

Contributions

Feel free to open an issue or create a PR