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
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.
- 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
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": ""
}
}
}
"bundles": [
"main"
]
"bundles": [
"main",
"special"
]
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 thefoo
module and exposes it- if
special.js
requiresfoo
, it is not included in its bundle
As a convenience, you can mix the array and object syntax.
"bundles": [
"main",
"special",
{
"more-special": {
"require": [
"foo"
]
},
"super-special": {
"external": [
"foo"
]
}
}
]
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.
"source": "./source/script"
"target": "./public/script"
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
dʒeɪ-ɛs christmas
dʒeɪ-ɛs-ɛks mess
A: Because then the question would be: "Why not browserify?"
MIT