Info.nl browser scripting quick-start kit.
Last updated 5 years ago by info.nl .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @info.nl/jsxmas 
SYNC missed versions from official npm registry.

JSXmas npm version code climate

Info.nl browser scripting quick-start kit.


$ npm i @info.nl/jsxmas -S


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


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": [


"bundles": [


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": [
  "special": {
    "external": [
  • main.js defines the foo module and exposes it
  • if special.js requires foo, it is not included in its bundle


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

"bundles": [
    "more-special": {
      "require": [
    "super-special": {
      "external": [

{Object} vendors

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

"vendors": {
    "jquery": [

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.


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


If your glass is half full

dʒeɪ-ɛs christmas

If your glass is half empty

dʒeɪ-ɛs-ɛks mess 


Q: Why not webpack?

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



Current Tags

  • 1.0.3                                ...           latest (5 years ago)

5 Versions

  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 5
Last Month 5
Dependencies (12)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |