Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

Question

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extending or merging the config into local files for consistency without the hassle of managing dependencies separately.

In addition to the configuration, I have implemented a set of handy npm scripts that run linters and various development tasks. For instance:

"lint:prettier": "prettier 'src/**/*.{js,json}' --write",
"lint:eslint": "eslint 'src/**/*.js'",
"lint:compatibilityCheck": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
"lint": "npm run lint:compatibilityCheck && npm run lint:prettier && npm run lint:eslint"

Currently, these scripts are duplicated in each project. However, I aim to distribute them alongside my shared package so they can be centrally defined. What would be the best approach for achieving this?

javascript npm package.json npm-scripts

Answer 1

Answer №1

According to a post on the npm blog, there are no straightforward methods to expose dev scripts in an npm package. The recommendation is to create JavaScript files that can run your desired scripts by utilizing the shelljs module.

For instance: Suppose you want to expose the script

lint:prettier": "prettier 'src/**/*.{js,json}' --write"

You can wrap the call inside a file named bin/lintprettier.js:

#! /usr/bin/env node
var shell = require("shelljs");
const path = require("path")

process.env.PATH += (path.delimiter + path.join(process.cwd(), 'node_modules', '.bin'));
shell.exec("prettier 'src/**/*.{js,json}' --write");

Next, add this script to the exported console scripts in your package.json:

...
"bin": {
   "lint-prettier": "bin/lintprettier.js"
}
...

Lastly, you can now reuse your script within your project:

"scripts": {
   "build": "...",
   "lint:prettier": "lint-prettier"
 }

Answer 2

According to a post on the npm blog, there are no straightforward methods to expose dev scripts in an npm package. The recommendation is to create JavaScript files that can run your desired scripts by utilizing the shelljs module.

For instance: Suppose you want to expose the script

lint:prettier": "prettier 'src/**/*.{js,json}' --write"

You can wrap the call inside a file named bin/lintprettier.js:

#! /usr/bin/env node
var shell = require("shelljs");
const path = require("path")

process.env.PATH += (path.delimiter + path.join(process.cwd(), 'node_modules', '.bin'));
shell.exec("prettier 'src/**/*.{js,json}' --write");

Next, add this script to the exported console scripts in your package.json:

...
"bin": {
   "lint-prettier": "bin/lintprettier.js"
}
...

Lastly, you can now reuse your script within your project:

"scripts": {
   "build": "...",
   "lint:prettier": "lint-prettier"
 }

Answer 3

Answer №2

Using Builder is one way to achieve this.

With Builder, you can package npm scripts and use them in any project where the package containing the scripts is installed.

In my experience, I consolidate all my build/test/lint scripts into an NPM package which I then install across multiple projects. This allows me to execute the same commands consistently in each project.

Despite being less actively maintained recently, Builder remains stable and reliable. I have personally had great success using it. The detailed README provides comprehensive guidance on how to get started.

Alternatively, following Cristiano's suggestion may provide more control over the implementation of the solution compared to utilizing Builder, which introduces another project with its unique set of challenges.

Answer 4

Using Builder is one way to achieve this.

With Builder, you can package npm scripts and use them in any project where the package containing the scripts is installed.

In my experience, I consolidate all my build/test/lint scripts into an NPM package which I then install across multiple projects. This allows me to execute the same commands consistently in each project.

Despite being less actively maintained recently, Builder remains stable and reliable. I have personally had great success using it. The detailed README provides comprehensive guidance on how to get started.

Alternatively, following Cristiano's suggestion may provide more control over the implementation of the solution compared to utilizing Builder, which introduces another project with its unique set of challenges.

Answer 5

Answer №3

Trying to let a dependency change the dependent configuration might not be the best approach, even if there was an easy way to do it.

Instead of starting from the bottom and going up, consider going in the opposite direction. I highly recommend using lerna.

Lerna is an excellent tool for managing packages in a monorepo. It allows you to hoist shared dependencies across your packages. Additionally, you can define all your packages under one main package.json, where you can set your npm scripts just once and run them for all packages (or only a few using the scope feature) with a single command.

Answer 6

Trying to let a dependency change the dependent configuration might not be the best approach, even if there was an easy way to do it.

Instead of starting from the bottom and going up, consider going in the opposite direction. I highly recommend using lerna.

Lerna is an excellent tool for managing packages in a monorepo. It allows you to hoist shared dependencies across your packages. Additionally, you can define all your packages under one main package.json, where you can set your npm scripts just once and run them for all packages (or only a few using the scope feature) with a single command.

Answer 7

Answer №4

Introducing a helpful tool I developed to tackle these types of issues: Dictator Builder. This tool is designed to generate dictators that are standalone NPM packages.

With Dictator Builder, you can specify the rules for what scripts should be included in the package.json file, as well as provide additional configurations:

{
  "message": "Configure package.json and implement linting",
  "actions": [
    {
      "message": "Ensure lint script is present in package.json",
      "haveJsonPathValues": [
        {
          "expression": "$.scripts.lint",
          "value": "npm run eslint"
        }
      ],
      "target": "package.json"
    },
    {
      "copyFrom": "static-files",
      "target": "."
    }
  ]
}

Answer 8

Introducing a helpful tool I developed to tackle these types of issues: Dictator Builder. This tool is designed to generate dictators that are standalone NPM packages.

With Dictator Builder, you can specify the rules for what scripts should be included in the package.json file, as well as provide additional configurations:

{
  "message": "Configure package.json and implement linting",
  "actions": [
    {
      "message": "Ensure lint script is present in package.json",
      "haveJsonPathValues": [
        {
          "expression": "$.scripts.lint",
          "value": "npm run eslint"
        }
      ],
      "target": "package.json"
    },
    {
      "copyFrom": "static-files",
      "target": "."
    }
  ]
}

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I interact with a v-dialog component within a child component in Vue.js using Vuetify?

Ways to insert text into an SVG file

Is it better to store CSS and JavaScript in separate files or within the main HTML document

Locating the exact position of a DOM node within the source document

Error: Update required to lodash version 3.0.0 to proceed with the build process

The system cannot locate the "default" task. Please consider using the --force option to proceed. The process has been halted due to warnings

Having Trouble with Typescript Modules? Module Not Found Error Arising Due to Source Location Mismatch?

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

What is the mechanism behind declaring a function using square brackets in Node.js/Javascript?

What causes isomorphic-style-loader to generate a TypeError: Cannot read property 'apply' of undefined when utilized alongside CSS-Modules?

Encountering issues with reading undefined properties while working with react-chartjs-2 and chart js

Is there a way to deactivate the click function in ngx-quill editor for angular when it is empty?

Infinite scroll layout meets Semantic UI visibility for a dynamic user experience

Is it possible to update table cell content depending on selected option?

Not triggering onDragStart in Material UI Autocomplete component in React

Unraveling the Enigma of Event Handlers: Mastering the Organization of a Sprawling jQuery File within an AJAX

In Visual Studio, the .js.map files and .js files seem to be mysteriously hidden, leaving only the TypeScript .ts files visible

Sending a JWT token to a middleware with a GET request in Express Node.js - the proper way

Refresh the webpage source code for an AJAX request

Communication between child and parent components in Vue.js is an essential feature