What Are "npm run dev" and "npm run prod"

Question

I use the following command to bundle my scripts via the Laravel Mix module:

npm run dev // Compile scripts.

npm run prod // Compile and minify scripts.

Are these native npm commands or custom Laravel Mix commands? Where are they defined?

I noticed they are listed as "scripts" in the Laravel package.json. What exactly are these scripts, custom commands for Webpack via Laravel Mix?

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

Solution 1

They are indeed the scripts as defined in the package.json file as you discovered. The values are run by your shell (so, for example, bash, zsh, etc. on UNIX-like operating systems).

One key thing to note is that the node_modules/.bin directory is added to PATH before executing. So, in the case of the two scripts you're asking about, cross-env can be found in node_modules/.bin (because it's almost certainly specified as a devDependency elsewhere in the package.json) as long as you've already run npm install or npm ci within the project directory.

Solution 2

Those commands are used at any project which supports JSON files on NPM. Regarding OP questions:

Are these native npm commands or custom Laravel Mix commands? Where are they defined?

• npm: One could say that it is a command native to the system, for calling Node Package Manager program. In Windows, for example, it should be the default command for calling npm from any console.
• run: It is a command native to npm. More information here. Keep in mind this is an aliases to the original command run-script.
• dev and prod: They're user defined.
  • dev: Used for running the specific commands for serving the project, to any server, to live development. In the case of a web page, you'll see your web page in the browser, and any change you make to the HTML code, for example, will be reflected immediately in the page you see in your browser.
  • prod: Compiles all the necessary files for production. Final product. In the case of a web page, for example, the HTML, CSS, and JS files you'll handle to the client. The result of running this command, it is expected to be one single folder with all the afore mentioned content.

I noticed they are listed as "scripts" in the Laravel package.json. What exactly are these scripts, custom commands for Webpack via Laravel Mix?

• "dev": "npm run development": Runs the commandment immediately below, which is: "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js". What this line of code does, depends on what dependencies you have on your project (see the node_modules folder, and read their respective documentation).
• "prod": "npm run production": It has the same description than the item above, but for npm run prod

Comments

[jonrsharpe]

You seem to have found what they are and where they're defined, so what's your question exactly? They're NPM scripts.

[GTS Joe]

What do they run, cross-env or webpack.js? Thanks for your help.

[GTS Joe]

Yeah, cross-env is listed in devDependencies. Thanks for your help, it helped me understand how these two custom scripts function, which is what I was looking for!

[carloswm85]

You may also find this reference of some use: https://www.npmjs.com/package/light-server#usage