npm basics clarification: differences between npm start and npm build - npm

Hi I need some clarification on npm materials.
What are the differences between "npm start" and "npm build"?
When do we use "run" for example, what are the differences between "npm test" and "npm run test"?
Thank you so much! I appreciate the explanation.

What you are finding is that there are some default scripts in NPM. Some of these are:
npm start
npm build
npm test
These are simply just aliases for npm run xxxx. To answer your question, npm run test and npm test are exactly the same. npm test is just a shorthand alias.
These default scripts are there to be used as kind of "universal" commands. For example: you have two different projects that have two different build processes. However, you could run npm build in both to build their respective build processes.

It depends on what you're using. In a react app npm start actually does npm run start but npm have allowed a shorthand version.
If you look in your package.json you'll see a scripts parameter that has all the things you can run using npm run [command]. You can define your own ones in there as well.
To answer your first question. The start and build commands are usually defined by webpack.
start is usually used to serve your app locally. So you can go to localhost and see it running.
build is used to compile your app into a folder, usually called dist/, into a flat html/CSS/JavaScript website so you can put the files onto a production server.

Related

Why does package.json script behave differently than identical terminal command

In my npm project, in my package.json file, I have the following lines of code:
"scripts": {
"build": "webpack"
},
While in my terminal, if I run npm webpack, I get the error message:
Unknown command: "webpack"
But if I run npm run build, I get a prompt from webpack saying I need webpack-cli... so the command is obviously recognized.
I'm confused about the different behavior of these two commands. In this case, isn't running npm run build identical to running npm webpack in my terminal? Why does one command fail and one succeed? What is actually happening when I run npm run build?
If we look at the documentation,
Environment
Package scripts run in an environment where many pieces of information are made available regarding the setup of npm and the current state of the process.
path
If you depend on modules that define executable scripts, like test suites, then those executables will be added to the PATH for executing the scripts.
Maybe this is the reason webpack is not recognized by the command line.

On Mac M1, can't run scripts in package.json: - sh: <dependency>: command not found

I just got a Mac Mini M1 for personal use, and I'm trying to run a preexisting React app. I installed nodejs and npm successfully, and running npm install does add the node_modules folder correctly as far as I can tell; but whenever I run npm start or npm run <script>, I get an error. It seems that npm can't access any of the project's dependencies. I've tried this using the rosetta terminal as well with the same results.
For an example, I initialized a new React project with npx create-react-app test_app, then cded into it and ran npm start. I got:
test_repo#0.1.0 start
> react-scripts start
sh: react-scripts: command not found
How do I get these commands to run properly and launch the app?
Here's what I'm using for node and npm:
➜ test_repo npm -v
7.6.0
➜ test_repo node -v
v15.11.0
I found a (very) hacky solution for now. I'm no expert with npm, but what I discovered is that npm scripts refer to dependencies indirectly - for example, having a command that says
"test": "jest"
tells npm to look in node_modules/.bin for a file called jest and to run that.
the issue is something to do with npm understanding this. But it's possible to get around that by putting the address of each dependency in the script, for example:
"test" "node_modules/.bin/jest"
I was able to get things to build this way. If someone comes along with a better answer, please show me up :P

How to prefer global npm rather than local one, inside npm scripts?

I have an almost weird scenario:
My project depends on cordova-lib#6.5.0 package, which has npm#^2.10.x as it's dependencies!
The worst thing about it (I think) is that it takes away my global npm while running npm scripts.
beside its a bad thing, should avoid using it, maybe an update fixes this, etc ... I am looking for a way/hack/workaround for situations like this.
Suppose I have a script in my package.json:
"scripts":{
"libs:update":"npm update bizotop-common-ui-components"
}
when I run npm run libs:update, the local npm (2.10.x) runs instead of my global one (6.1.0).
If I have to keep having npm#2.10.x as my local dependency, do you know any hack/workaround so that I can run my global version of npm in my npm scripts in this kind of situation?
Thanks! +1

Executing npm link from a common folder

I use custom built library and then link them between other libraries using 'npm link'. One problem is that,
if I do 'npm install' the links disappear and then I will have to go manually and do the linking.
In order to solve this issue, I am thinking of building a script to do npm link across libraries wherever needed but I am not sure if that will work because we will have to do npm link on the exact path from command line instead of running from a common path from command line.
Example:
I have built a library called, #mycustomlib/ui-components and I use them in other projects.
In order for me to use it, I would have to do the link in the appropriate project folder else I wouldnt be able to import.
Any npm link you've set up will be overwritten when you npm install.
One option to avoid having to relink every time you npm install might be to create a new script in package.json like this:
"scripts": {
"install-local": "npm install && npm link #mycustomlib/ui-components"
}
Then just run npm run install-local.

How do I dist JUST my non-development npm dependencies after building my app

We have many projects - they are typescript but that is not of particular importance, the important thing is that we have dev dependencies. In fact most of our projects have far more dev dependencies than prod dependencies - endless testing frameworks.
So, I checkout all my dependencies, build and test my app and assuming it is all OK I want to dist my compiled application, with its dependencies.
Is there an easy way of doing this?
One way I thought of that is a possible solution is as follows:
(this runs on a CI build so we need to start from scratch)
npm install
npm run build
npm test
npm rimraf node_modules (I assume this will work...)
npm install --production
Comments on this approach?