Duplicated watchify and browserify commands

[jedrichards]

These days I'm often writing npm scripts that look a bit like this:

"scripts": {
  "watchify": "watchify -v -o bundle.js src/index.js",
  "browserify": "browserify -o bundle.js src/index.js",
  ...
}

i.e. one command to watchify while developing, then another browserify command using the exact same options to generate the bundle once as part of a build. This duplication isn't ideal, especially when the command becomes very long with various plugins and transforms.

Is there a pattern to avoid this duplication? I imagined some flag for watchify that caused it to run once and exit might work, essentially making it operate similarly to browserify. Another approach is to use the JS API and write a script that applies watchify to browserify conditionally based on a env var or something, but I'd like an approach that let me do everything concisely in the package.json scripts.

Or is there a simpler approach I'm missing?

Thanks! :)

[zertosh]

You can do:

  "config": {
    "build_args": "-o bundle.js src/index.js"
  },
  "scripts": {
    "watchify": "watchify -v $npm_package_config_build_args",
    "browserify": "browserify $npm_package_config_build_args"
  }

Or not even put it in a "config" field":

  "build_args": "-o bundle.js src/index.js",
  "scripts": {
    "watchify": "watchify -v $npm_package_build_args",
    "browserify": "browserify $npm_package_build_args"
  }

[jedrichards]

Oh great, didn't know you could dynamically build whole command strings with config variables like that. Thought it was just for flags and args for some reason.

I had ended up doing something with eval:

"watch": "COMMAND=watchify npm run bundle",
"bundle": "eval \"$COMMAND -v -o static/bundle.js src/index.js\"",

But your way seems much more idiomatic and cross platform. Thanks!