Network Processor Module

    @info.nl/jsxmas

    1.0.3 • Public • Published

    JSXmas npm version code climate

    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.

    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

    Install

    npm i @info.nl/jsxmas

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • admin.info.nl