@info.nl/jsxmas NPM

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

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.