What is the best way to create multiline scripts within npm scripts?

Question

What is the best way to create multiline scripts within npm scripts?

Here is how my package.json is structured:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "lint": "./node_modules/eslint/bin/eslint.js --format \"./node_modules/eslint-friendly-formatter/index.js\" .",
    "build:server": "./node_modules/babel-cli/bin/babel.js . -d dist/server --ignore node_modules,dist,client,public,webpack*"
  }
}

The commands lint and build:server in the script section above are quite hard to read, so I am considering breaking them into multiple lines.

I attempted using \, but it resulted in errors like this:

npm ERR! Failed to parse json
npm ERR! Unexpected token ' ' at 11:80
npm ERR! :server": "./node_modules/babel-cli/bin/babel.js . -d dist/server \
npm ERR!                                                                   ^

Is there a way for me to achieve this without errors? Or should I create another bash file such as build.sh and call it in npm scripts with ./build.sh server?

javascript npm

Answer 1

Answer №1

You have the ability to link separate tasks together.

For instance:

"scripts": {
    "lint-jshint": "jshint --verbose --show-non-errors ./src/main/js",
    "lint-eslint": "eslint ./src/main/js ./src/test/js",
    "lint-csslint": "csslint ./src/main/js",

    "lint": "npm run -s lint-jshint & npm run -s lint-eslint & npm run -s lint-csslint",

    "pretest": "rimraf ./build/reports/tests && mkdirp ./build/reports/tests && npm run -s lint",
    "test": "karma start ./src/test/resources/conf/karma.conf.js",
    ...

Check out this interesting blog I found back then:

Answer 2

You have the ability to link separate tasks together.

For instance:

"scripts": {
    "lint-jshint": "jshint --verbose --show-non-errors ./src/main/js",
    "lint-eslint": "eslint ./src/main/js ./src/test/js",
    "lint-csslint": "csslint ./src/main/js",

    "lint": "npm run -s lint-jshint & npm run -s lint-eslint & npm run -s lint-csslint",

    "pretest": "rimraf ./build/reports/tests && mkdirp ./build/reports/tests && npm run -s lint",
    "test": "karma start ./src/test/resources/conf/karma.conf.js",
    ...

Check out this interesting blog I found back then:

Answer 3

Answer №2

That action is not allowed.

The code snippet can be found in read-json.js, located within the package

node_modules/npm/node_modules/read-package-json

. It is used in run-script.js to run either $ npm run-script ~~ or its alias $ npm run ~~.

function scriptpath (file, data, cb) {
  if (!data.scripts) return cb(null, data)
  var k = Object.keys(data.scripts)
  k.forEach(scriptpath_, data.scripts)
  cb(null, data)
}

function scriptpath_ (key) {
  var s = this[key]
  // This action is restricted and may cause issues
  if (typeof s !== 'string') return delete this[key]

  var spre = /^(\.[\/\\])?node_modules[\/\\].bin[\\\/]/
  if (s.match(spre)) {
    this[key] = this[key].replace(spre, '')
  }
}

The variable key in scriptpath_ represents something like "build:server" in your code.

The value of this[key] is similar to

"./node_modules/babel-cli/bin/babel.js . -d dist/server --ignore node_modules,dist,client,public,webpack*"

in your code.

Therefore, ensure that any code you input in package.json is of type string to prevent errors unless you are contributing to the npm/read-package-json package.

Answer 4

That action is not allowed.

The code snippet can be found in read-json.js, located within the package

node_modules/npm/node_modules/read-package-json

. It is used in run-script.js to run either $ npm run-script ~~ or its alias $ npm run ~~.

function scriptpath (file, data, cb) {
  if (!data.scripts) return cb(null, data)
  var k = Object.keys(data.scripts)
  k.forEach(scriptpath_, data.scripts)
  cb(null, data)
}

function scriptpath_ (key) {
  var s = this[key]
  // This action is restricted and may cause issues
  if (typeof s !== 'string') return delete this[key]

  var spre = /^(\.[\/\\])?node_modules[\/\\].bin[\\\/]/
  if (s.match(spre)) {
    this[key] = this[key].replace(spre, '')
  }
}

The variable key in scriptpath_ represents something like "build:server" in your code.

The value of this[key] is similar to

"./node_modules/babel-cli/bin/babel.js . -d dist/server --ignore node_modules,dist,client,public,webpack*"

in your code.

Therefore, ensure that any code you input in package.json is of type string to prevent errors unless you are contributing to the npm/read-package-json package.

Answer 5

Answer №3

Another popular option is creating an npm command that points to a local bash script (which provides more flexibility).

For example:

# package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "lint": "./node_modules/eslint/bin/eslint.js --format \"./node_modules/eslint-friendly-formatter/index.js\" .",
    "build:server": "./build-server.sh"
  }
}

# build-server.sh
#!/bin/bash

./node_modules/babel-cli/bin/babel.js . \
  -d dist/server \
  --ignore node_modules,dist,client,public,webpack*

NOTE: Ensure you have permission to execute the file; otherwise, you may encounter permission errors.

sudo chmod 755 'build-server.sh'

Refer to: Run script on mac prompt "Permission denied"

Answer 6

Another popular option is creating an npm command that points to a local bash script (which provides more flexibility).

For example:

# package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "lint": "./node_modules/eslint/bin/eslint.js --format \"./node_modules/eslint-friendly-formatter/index.js\" .",
    "build:server": "./build-server.sh"
  }
}

# build-server.sh
#!/bin/bash

./node_modules/babel-cli/bin/babel.js . \
  -d dist/server \
  --ignore node_modules,dist,client,public,webpack*

NOTE: Ensure you have permission to execute the file; otherwise, you may encounter permission errors.

sudo chmod 755 'build-server.sh'

Refer to: Run script on mac prompt "Permission denied"

What is the best way to create multiline scripts within npm scripts?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for transferring information obtained from an API to my custom HTML page

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

Sending a request to a JSON file using Ajax

Guide on exporting type definitions and utilizing them with npm link for a local package

Display the entire dataset retrieved from MongoDB and utilize the doT.js templating engine for rendering

Adjust the color of an SVG icon depending on its 'liked' status

"Enhancing Your List: A Comprehensive Guide to Editing List Items with the Power of AJAX, jQuery, and

Combining the power of ExpressJS with a dynamic blend of ejs and React for an

Unable to retrieve data function properties within Vue.Js Component methods

What is the best way to dynamically pass JSON object values to PHP?

Retrieve active route information from another component

Holding off $ajax requests until specific code finishes executing

Is the callback for a request always invoked?

HighCharts: visualize vertical stacked bars displaying the distribution of percentages within each stack

Selenium - Activating a flash button

Ways to automatically change a URL into a clickable link upon pasting

The HTML Bootstrap collapse feature is not functioning correctly upon the initial button press

Verify if the value in a textbox exceeds the number entered in an array of textboxes

Efficiently perform complex nested grouping using the powerful array

Is it possible to create two header columns for the same column within a Material UI table design?