What does " yarn build " command do? Are " npm build " and "yarn build" similar commands? - npm

What does yarn build command do ?
Are yarn build and npm build the same? If not what's the difference?

yarn build and npm build are not existing commands by default. I think you mean yarn run build or npm run build.
build is a command which can be specified in your package.json file on the scripts property. See the example below.
{
"name": "mypackage",
"version": "0.1.0",
"scripts": {
"build": "webpack --config webpack.dev.js"
}
}
In this example, build is a shortcut for launching command webpack --config webpack.dev.js. You can use every keyword you want to define some shortcuts to launch commands.
And the only difference between the two commands it's the JS dependency manager you're using, yarn or npm.
More infos :
https://yarnpkg.com/lang/en/
https://www.npmjs.com/

"yarn build
Bundles the app into static files for production." from Create React App by MAD9135.
https://mad9135.github.io/F2020/modules/week3/02-react-tooling/07-create-react-app.html

yarn build is a shortcut of yarn run build
from original documentation:
Reference: https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script

its the same i guess the real difference between yarn and npm is the performance and security that yarn provides.
yarn actually installing packages in parallelly and Npm only install one package at a time
And Yarn have more secure dependency.

Yarn is a package manager for your code. Yarn build makes a bundle of apps in one format and shows errors if the app has any problem that will make an error on the server.

Related

Missing node_modules bin on PATH

I have run the command
yarn add -D jest to install jest to my project.
This does successfully add jest to my node_modules
> find . -name jest
./node_modules/.bin/jest
./node_modules/jest
When I use iterm2 to run jest however I get the following output
> jest
zsh: command not found: jest
FWIW When I use the IntelliJ terminal it does work
> jest
Determining test suites to run...^C
What am I missing in the iterm environment to be able to have node_modules bin in my classpath depending on the current repo?
An OS shell doesn't know about your locally installed node_modules, but IntelliJ terminal does. So if you want to run jest from outside of an IDE you should perform several additional steps.
The most common way to run locally installed packages is to define a separate script in the "scripts" section of your package.json file. Then you will be able to run it using the yarn/npm itself from any terminal. You can find an exact example in the Yarn docs.
{
"name": "my-package",
"scripts": {
"test": "jest"
}
}
yarn run test
Or you could install jest globally so it will be accessible from anywhere, but it's not a best practice.

Build npm-package from private git on install

I got a private bitbucket repo A that I install via npm in my project B.
npm install git+ssh://git#bitbucket.org....git
That works with no problems.
But now I would like to run a build in A after installing it.
npm in default comes with a lot of scripts for stuff like that https://docs.npmjs.com/misc/scripts
I tryed postinstall, prepare, prepublish, preinstall in my package.json in A:
...
"scripts": {
"prepublish": "npm run build",
"build": "...",
...
On installing my package A in B I get npm Error: npm ERR! premature close
I would like to run the build on install to remove build files from git (A).
In this case the build runs webpack + babel compile.
Project B is made with create-react-app.
I don't want to eject create-react-app, setup webpack or compile all node_modules packages.
Any experience with this workflow?
There is no need to eject Project B just adding your Project A as a dependency in package.json is enough. And for Project A please use "preinstall" it will run before every npm install including when you run npm install on Project B. And in my case I just tested it it working perfectly in my machine. If you encountering issue I think it might be because of the way you building it maybe? So can you show us the build script?
Use prepare since according to the NPM docs it will install dependencies and devDependencies before the package is packaged and installed.
Which is helpful if you are compiling using Typescript, or doing transforms.
...
"scripts": {
"prepare": "npm run build",
"build": "...",
...
Note: If your dist/build directory is ignored in .gitignore. Add an empty .npmignore file to your repository; otherwise the prepare script won't build the directory.
Ref: https://docs.npmjs.com/cli/install

'electron-packager' is not recognized as an internal or external command

I recently started using electron. I have successfully completed the 1st phase by creating a hello world app (included files index.html, main.js, package.json). Now I am trying to package the app using electron-packager but getting this error
Steps I have followed:
Created a project directory named helloworld.
Initialized the project directory using npm init command.
Then installed electron using npm install electron --save-dev.
Then created the javascript and html files as main.js and index.html respectively.
Then used npm start to execute the application.
Then installed electron-packager using npm install electron-packager.
Now the problem is coming in this step when i am trying to pacakge the app using command electron-packager .
Perform a global package install:
npm install -g electron-packager
The -g flag tells NPM to install the package globally which makes the command electron-packager available in your PATH.
If you don't want to do a global install you can install it locally and run with npx.
npm install -D electron-packager
npx electron-packager .
Alternatively, you can reference it straight from the node_modules folder (not recommended).
./node_modules/electron-packager/cli.js
There are two cases to make it work...
As discussed above, install electron globally using -g,
i.e. using npm install -g electron-packager
Change in your package.json:
"scripts": {
"start": "electron-packager ."
},
Then type in the command npm start.
This way it worked for me..
If you have installed it locally with:
npm install electron-packager
Then, it's not gonna work, install it globally as a cli:
npm install -g electron-packager
You can also get it through:
"node_modules/electron-packager/cli.js" . --all --asar
After All, if you don't get it working, install electron-packager.
Then, go to your package.json. And beneath your start scripts. Make another string named "build" and give it a value of the electron-packager command you want to run:
...
"scripts": {
"start": "electron .",
"build": "electron-packager . --asar --all"
},
...
Then, go in command prompt or terminal or bash.
Then, type:
npm run build
I might be totally off with it but my fix was that I put the dot without space just make sure in you package.json file its "start": "electron ."
Fixed it for me at least
You've to install electron-packager globally, that's why it shows 'electron-packager' is not recognized as an internal or external command
For this, you have to install electron-package globally
You can install globally by using -g option.
Example:-
npm install -g electron-packager OR npm i -g electron-packager //i stands for install
In my case it doesn't worked after npm global installation.
On the electron-builder Readme page it's recommended to install with yarn.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Also we can put folder directly to PATH. On Windows 10:
Search with word "environment" and open Edit the environment variables.
Select, edit and Add new value C:\Users\USER_NAME\AppData\Roaming\npm to variable Path. Replace USER_NAME with your Windows username.
Then we might need to restart or logout.
Also in my case I enabled script execution on Windows 10 with instruction on answer below:
PowerShell says "execution of scripts is disabled on this system."

How can I use only locally installed npm packages?

For example, to launch locally installed gulp, I have to run the following command from inside of my project:
node_modules/gulp/bin/gulp.js
To be able to launch npm packages only by their name, I want to include node_modules relatively to project's root dir. Is this possible?
P.S
I know how to install npm packages globally, but I'm trying to avoid doing that.
I hope I understand you correctly: You are trying to execute programs like gulp from your local install.
You can set up a npm script like so in your package.json:
package.json
...
"scripts": {
"build": "./node_modules/.bin/gulp"
}
...
Then, you can run gulp via npm run build from your command line. (Or optionally you can type ./node_modules/.bin/gulp)

How to install grunt and how to build script with it

Hi I'm trying to install Grunt on Windows 7 64 bit. I have installed Grunt using commands
npm install -g grunt
npm install -g grunt-cli
but now if I try to do grunt init, it is throwing me an error -
A valid Gruntfile could not be found. Please see the getting started
guide for more information on how to configure grunt:
http://gruntjs.com/getting-started Fatal error: Unable to find
Gruntfile.
But when I look inside the grunt folder on my system the Gruntfile.js is there. can someone please guide me how to install this grunt properly and how to write built Script using the grunt. I have one HTML page and java script if i wants built a script using Grunt how can i do it?
To setup GruntJS build here is the steps:
Make sure you have setup your package.json or setup new one:
npm init
Install Grunt CLI as global:
npm install -g grunt-cli
Install Grunt in your local project:
npm install grunt --save-dev
Install any Grunt Module you may need in your build process. Just for sake of this sample I will add Concat module for combining files together:
npm install grunt-contrib-concat --save-dev
Now you need to setup your Gruntfile.js which will describe your build process. For this sample I just combine two JS files file1.js and file2.js in the js folder and generate app.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concat: {
"options": { "separator": ";" },
"build": {
"src": ["js/file1.js", "js/file2.js"],
"dest": "js/app.js"
}
}
});
// Load required modules
grunt.loadNpmTasks('grunt-contrib-concat');
// Task definitions
grunt.registerTask('default', ['concat']);
};
Now you'll be ready to run your build process by following command:
grunt
I hope this give you an idea how to work with GruntJS build.
NOTE:
You can use grunt-init for creating Gruntfile.js if you want wizard-based creation instead of raw coding for step 5.
To do so, please follow these steps:
npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile
For Windows users: If you are using cmd.exe you need to change ~/.grunt-init/gruntfile to %USERPROFILE%\.grunt-init\. PowerShell will recognize the ~ correctly.
Some time we need to set PATH variable for WINDOWS
%USERPROFILE%\AppData\Roaming\npm
After that test with where grunt
Note: Do not forget to close the command prompt window and reopen it.
I got the same issue, but i solved it with changing my Grunt.js to Gruntfile.js
Check your file name before typing grunt.cmd on windows cmd (if you're using windows).
You should be installing grunt-cli to the devDependencies of the project and then running it via a script in your package.json. This way other developers that work on the project will all be using the same version of grunt and don't also have to install globally as part of the setup.
Install grunt-cli with npm i -D grunt-cli instead of installing it globally with -g.
//package.json
...
"scripts": {
"build": "grunt"
}
Then use npm run build to fire off grunt.