JSXmas

Info.nl browser scripting quick-start kit.

Installation

$ npm i @info.nl/jsxmas -S

Features

Build your client-side script on the fly with

- CommonJS modules
- npm dependency management
- instant linting
- ECMAScript 2015 (optional)
- React JSX (optional)
- source maps

ECMAScript 2015

• Specification
• Babel features

ESLint

If you use ECMAScript 2015 or JSX syntax, you must enable them with an eslintConfig entry in your package.json file. See Specifying Environments and Specifying Language Options in the ESLint user guide. The best way to set rules is to extend an installed configuration. See Extending Configuration Files for more info.

The browserify transform that provides linting uses the simple linter Node.js API module for fast on the fly processing; plugins and .eslintrc files will not work in that context.

Zero configuration

• your source file is ./source/script/main.js
• your target file is ./public/script/main.min.js
• your target source map file is ./public/script/main.min.js.map

Custom configuration

Use the package name as a property in the standard package.json's config entry. All configuration options are optional.

{
  "config": {
    "@info.nl/jsxmas": {
      "bundles": [],
      "vendors": {},
      "source": "",
      "target": "",
      "map": ""
    }
  }
}

{Array|Object} bundles

Default value:

"bundles": [
  "main"
]

Array

"bundles": [
  "main",
  "special"
]

Object

When you generate multiple bundles, the object syntax gives you more control about what to expose and to exclude in which bundle.

This corresponds to the browserify require and external methods.

"bundles": {
  "main": {
    "require": [
      "foo"
    ]
  },
  "special": {
    "external": [
      "foo"
    ]
  }
}

• main.js defines the foo module and exposes it
• if special.js requires foo, it is not included in its bundle

Mixed

As a convenience, you can mix the array and object syntax.

"bundles": [
  "main",
  "special", 
  {
    "more-special": {
      "require": [
        "foo"
      ]
    },
    "super-special": {
      "external": [
        "foo"
      ]
    }
  }
]

{Object} vendors

Every vendor file requires all of its dependencies and makes them available outside of the bundle.

"vendors": {
    "jquery": [
      "jquery",
      "jquery-ui"
    ]
}

Vendor bundles do not generate source maps.

{string} source

Default value

"source": "./source/script"

{string} target

Default value

"target": "./public/script"

{string} map

The convention for source maps is to use the generated file name and append .map. If you need to customize that, you can provide a map string with two regular expression back-references in the form $[substring-index], one for the base name without extension, and one for the extension.

Example

• generated file base name: main.js
• map value: "$1-$2-map.json"
• source map base name: main-js-map.json

Pronunciation

If your glass is half full

dʒeɪ-ɛs christmas

If your glass is half empty

dʒeɪ-ɛs-ɛks mess 

FAQ

Q: Why not webpack?

A: Because then the question would be: "Why not browserify?"

License

MIT