NPM - Scripts - How Do They Work? - javascript

I cant get my head around how scripts are running within package.json & would appreciate some insight for us newbies.
Is it the case that they are bash scripts that are run by node having loaded the various dependencies?
If yes, then how does it process the javascript code?

Is it the case that they are bash scripts
yes
that are run by node
no, they are run by sh.
having loaded the various dependencies?
no, no js files are loaded, the only thing npm does for you is to prepare the environment. Among other things, it adds ./node_modules/.bin to PATH so you can invoke installed modules immediately.
When you run npm run-script whatever, this is what npm does:
reads the corresponding command line from package.json
prepares the environment
invokes sh (or comspec on win) and gives it the command and the env. No big magic here.

This may not be 100% accurate so I implore other, more qualifies, experts to chime in.
NPM is a program, installed as part of the Node.JS environment. It's two main uses (as describe here) are for searching for node.js packages and installing node.js packages.
However, NPM is also capable of understanding "simple" (a relative term) scripts.
When you write a script in your package.json, and issue the NPM command, say "npm start", NPM will read and interpret the script. NPM then searches your node_modules structure for the accompanying binary and executes that binary with the necessary start parameters.
An example would be
"test": "mocha --reporter spec test"
when you issue "npm test", NPM will look for the mocha binary in your node_modules structure. NPM finds mocha initiates the call, passing the reporter command arg (--reporter spec) and the name of the file to be read and executed for the test.

Related

How to install a npm package from github requiring a build step, e.g. when forking a library?

Assume you use a library like vue3-datepicker. You realize you need to customize something, and as as first step you want to use a custom fork of it.
The issue is, there is a build step when the package is pushed to npm's registry since the project doesn't use plain JavaScript, but may have vue or typescript files.
In this case, that would be npm run build:component, though that depends on the project.
Just installing the fork from github via:
yarn add <GitHub user name>/<GitHub repository name>#<branch/commit/tag>
hence doesn't suffice as then the ./dist folder doesn't exist.
You'll get really strange errors like:
error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json.
As a quick and dirty solution, I removed in my fork the ./dist/ folder from the .gitignore, ran the npm i && npm run build:component in my fork, and pushed it.
Huge downside is, the ./dist/ folder is now part of that repository, after each change in my fork I also have to build the files again and push those as well.
I rather have the build process triggered in my application using my fork. Is there a way from my application to say:
When you install that library, you have to run a certain script once you downloaded all the files?
The solution should be usable for both npm and yarn, in the sense that the fork my be installed by either one in different applications.
A quote from npm-install Docs
If the package being installed contains a prepare script, its dependencies and devDependencies will be installed, and the prepare script will be run, before the package is packaged and installed.
so in your fork's package.json you can add
"scripts": {
// ...
"build:component": "rollup -c build/rollup.config.js",
"prepare": "yarn build:component || npm run build:component"
}
If you want to trigger builds after installation, you can use the postinstall or a build script in your package.json. In this script, you can create directories and do other setups, using shell commands or javascript programs:
{
"scripts": {
"build": "mkdir dist && npm run build:component",
"build:component": "some command"
}
}

Can I include bash/sh files as dependencies in package.json?

I have a bash script which I wrote for publishing modules to npm: publish.sh
As I still work on tweaking this script a lot, every time I change it, I need to make the changes in every copy of it in every npm module I am managing.
Is there a way to include this as a dependency in my package.json file so that I just need to run npm update; npm install in order to update it? Maybe the sh file would need to be executed by some wrapper javascript or something like that..?
"scripts": {
"start": "sh ./scripts/publish.sh",
...
}
If you need access to the script in a single project, you can put it in the "scripts" object in package.json.
"scripts": {
"publish": "/bin/sh publish.sh"
}
The above can be run with npm run publish. See npm run-script docs for more information.
If you literally want to add the shell script as a dependency that can be installed (from the public registry or a private registry) with npm install, you can absolutely do that. Lots of not-JavaScript executable things are available in the npm repository. You'll want to create a package.json for the dependency and specify the location of your shell script with the "bin" entry.
An example package you can look at if you get stuck is notes.sh. The source code is on GitHub. Look at the package.json to see how they specified the scripts to run in the "bin" entry. You'll still need to create a "script" entry in your other project to run the installed shell script (or you can run it as an npm hook) though, unless you're running it manually or spawning a child process in your code or something.

How does npm scripts prioritise local dependency over global ones?

I understand npm scripts adds ./node_modules/.bin to your PATH, therefore you can simply run npm test using the package.json below, and npm will automagically use the local version of mocha found in ./node_modules/.bin
"scripts": {
"test": "mocha"
}
This is a nice feature, because it saves me writing package.json files like this:
"scripts": {
"test": "./node_modules/.bin/mocha"
}
BUT what if I bring on a new developer who has mocha installed globally? or I need to push this to an environment with preconfigured global packages? If I am using the short-hand mocha, rather than ./node_modules/.bin/mocha in my package.json, What takes precedence, the global or local package?
Node.js will try to run first your locally installed packages.
If you require a module, Node.js looks for it by going through all node_modules/ directories in ancestor directories (./node_modules/, ../node_modules/, ../../node_modules/, etc.). The first appropriate module that is found is used.
For a more detailed explanation about how Node.js resolves required modules, here is a nice breakdown.

Not Getting $ in command prompt in Node.Js

My NodeJs is working fine but i have an issue I'm not seeing $ in the prompt as most example point.
Another issue is when i put sudo I dont get anything.Things I have tried are the following
$ sudo npm install npm -g
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
npm#2.7.1 /usr/lib/node_modules/npm
given on the following Website
http://www.tutorialspoint.com/nodejs/nodejs_npm.htm
Apologies am very new to Node.JS.Please help
I'm going to explain this in terms familiar to MS windows.
$ npm --version
^ dollar sign is the same as "C:\" in windows.
It just means "from here..." in the most basic terms I can use.
You don't need the dollar sign for anything in that tutorial.
"sudo" means "elevate to an administrator level" similar to opening a command line terminal "in administrator mode." But for Linux (Ubuntu and Mac as *NIX) systems.
--version can be called as "-v" most of the time and means "for the thing I've named before, in this case "npm" show me the version.
Once you've installed NodeJS it comes with a "package manager" called NPM. The best way to relate this to windows is by considering it a command line version of an "installation" that installs different programs as you tell it to with different options.
"npm install -g" means "Hey NPM! Install to EVERYWHERE(call from command line/terminal/bash) the thing I Tell you next. "npm install -g express" for example, means hey NPM, install "expressJS" globally, so I can use the terminal to write commands(micro apps) from the expressJS I just installed with node.
"npm install --save" means hey, install this microapp, but ONLY let me use it in THIS EXACT FOLDER I'm in, and let anyone else that is in this folder know they need to install it to use this application I'm making.
"npm init" Is actually the FIRST thing you should do in any node project folder. It creates the "package.json" file in the current directory, and it will define the folder you're in as the folder to start installing stuff you "npm install" to the "node_modules" folder that will show in the folder you're currently in.
If you want to tinker with NodeJS code, and you don't want to tamper with your local machine and install all kinds of stuff you're not totally sure about yet you can use "REPL.it" (https://repl.it/languages/nodejs) the white window on the right is treated like a file you'd run in node. The dark window on the right is an actual NODE TERMINAL that you can run nodejs commands/code in directly.
There's one other good resources in general and that is here (https://devdocs.io/) it's called "Devdocs" and it has Node, npm, and express code examples, clean explanations, and examples that you can download directly to your local machine.
I hope that gets you moving with NodeJS. It's hard to understand, but with a bit of try and fail you'll start to try more and fail less. Cheers!

Writing a script to automate npm command

I am working on an angular js project and I would like to automate The following two commands.
./node_modules/protractor/bin/webdriver-manager update
./node_modules/protractor/bin/webdriver-manager start
The issue is that I am working on a small angular project on github. I added all dependencies required to my package.json, However when my friend pulled it from git he was able to install protractor but he could not get webdriver to start unless he ran the above two commands. So i wanted to write some script to automate it and better yet even add protractor ./conf.js to it.
So I did research and I am aware that I can write a npm script but I was not able to find a proper document that showed where to write the script and how to execute it. I would appreciate all suggestions.
You can add a scripts property to your package.json with the command you wish you run.
"scripts": {
"prostart": "./node_modules/protractor/bin/webdriver-manager start",
"proupdate": "./node_modules/protractor/bin/webdriver-manager update"
}
you would then run these by typing npm run prostart or npm run proupdate which would look for those commands in your package.json.
In addition to Josh's answer, the script start could be run as npm start as start is a special keyword, but update should be run as npm run update because npm update is another npm command entirely.
For any other command besides start and test (I think), you have to preface it with npm run ...

Categories

Resources