install webpack VS install webpack-cli? - javascript

What is the difference installing between the two? I installed webpack globally as said on the installation page then I moved to getting started it is said there to install webpack-cli locally. CLI = Command Line Interface, Does that mean webpack do not have cli so that I have to install webpack-cli?

Since webpack version 4, the command line interface got removed from the main package and added to its own repo and package.
You are obliged to install a cli aside of webpack. CLI = command line interface, webpack = main functionalities.

Related

Cannot install Vue Cli on Mac Catalina [duplicate]

While installing the dependencies of vue-cli, vue is not identified. Why?
rm -rf node_modules and npm install again
have a look here
Add sudo before yarn when installing
yarn global remove #vue/cli
sudo yarn global add #vue/cli
vue
I had the same issue for a while.
TL;DR
npm install #vue/cli-service --save-dev
As the documentation specify it is a development dependency https://cli.vuejs.org/guide/#cli-service
The CLI Service (#vue/cli-service) is a development dependency. It's an npm package installed locally into every project created by #vue/cli.
Origin
I had a fresh install of nodejs
And just did
>> sudo npm install -g #vue/cli#latest
>> vue --version
#vue/cli 4.5.8
The issue
The issue presented like this
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
/bin/sh: 1: vue-cli-service: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The fixes:
npm install #vue/cli-service --save-dev
Which led me straight to another error message
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
ERROR Error: Cannot find module 'vue-template-compiler/package.json'
Which I fixed the same way
npm i vue-template-compiler --save-dev
And now it is working fine.
Installing current version without permanently installing vue-cli.
npx #vue/cli create appname
It shows the vue executable is located at /home/alisha/.local/bin. So probably this location is not there in your $PATH.
You should be able to run the vue commands if you provide the full path, like:
~/.local/bin/vue create hello-world
You can also see if that directory is in your PATH by running some command like:
echo $PATH | grep '.local/bin/'
If it's there, you would see it, otherwise you can add it to your path by placing it in your ~/.profile.
Edit ~/.profile and add the following at the bottom of it.
PATH="$HOME/.local/bin:$PATH"
Hope it helps!!
I had the same issue while making a build for production.
You will require vue-cli to be installed. Use below command to install the latest version.
npm install -g #vue/cli#latest
Then
npm install
Might have to do with you having an old version on your computer:
Warning regarding Previous Versions
The package name changed from vue-cli to #vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with
npm uninstall vue-cli -g or yarn global remove vue-cli.
You can find it here: https://cli.vuejs.org/guide/installation.html
THIS FIXED THE ISSUE FOR ME:
After running
sudo npm install -g #vue/cli
I ran
sudo nano $HOME/.profile
and pasted the following line
export PATH=$PATH:/home/chike/.npm-global/bin
after writing the code, next thing I did was Ctrl + O, ENTER and Ctrl + X then wrote
vue init webpack myapp
When you install vue using cli that time you got the path of vue.Now you can copy the bin folder path.
In my example /home/sublime/.npm-packages/bin
Now you export the path below command
export PATH=$PATH:/home/sublime/.npm-packages/bin
I solved mine by running (add sudo if needed)
npm i -g vue-cli#2.9.6
npm i -g #vue/cli
Got similar issue when deploy vue project in jenkins.
Here is what I did:
Add node's bin/ dir, to jenkins user's .bashrc file.
e.g
# node
NODE_HOME=/home/dev/.nvm/versions/node/default
PATH=$NODE_HOME/bin:$PATH
Tips - about nvm & yarn
When you manage node version via nvm, make sure you already choose the node version in terminal. e.g:
nvm use stable
node -v
If you use nvm, and installed yarn via npm, then better install vue-cli via npm not yarn, otherwise the vue executable is not placed into node's bin/ dir, at least that's the case in my tests, and as a result will cause you fail to find the vue command.
Using Yarn on Ubuntu it is installed to ~/.npm-packages/bin/. You must add this directory to your PATH. For example run the following command, close your terminal and open a new one.
user#machine:~$ echo 'export PATH="$PATH:~/.npm-packages/bin/"' >> ~/.bashrc
Note: if the file ~/.bashrc does not exist then simply create it.
Following worked for me:
First remove all the existing ones:
yarn global remove #vue/cli
yarn global remove #vue/cli-service
sudo yarn global remove #vue/cli
sudo yarn global remove #vue/cli-service
Then add #vue/cli using sudo:
Note: use sudo if required
yarn global add #vue/cli
yarn global add #vue/cli-service
Then, the final thing to do is to RESTART the terminal.
vue --version
#vue/cli 4.5.9
If you already got a project, the only two things you need to do is:
Delete the directory node_modules (it is safe, since it is not under git and will regenerate in the next step)
In the command-line write yarn install (it will install everything you need)
If you start installing vue-cli manually in a existing project, it the package.json and package-lock.json will be updated. If you already did. Do a checkout from git, and follow my steps above
This may be a problem caused by version conflicts. "export PATH=$PATH:" This is really useful in some cases. But if you are also like me, after trying the direct “export path” method in the comment above, restarting the terminal still can not execute the situation, you can try this way.
Uninstall Vue
npm uninstall -g #vue/cli
Check the local-global npm package installation path, vue is installed in this directory, check if it has been removed.
npm root -g
Install vue (you can check with https://cli.vuejs.org/#getting-started to find the latest command)
npm install -g #vue/cli
Create a connection to the /usr/local/bin directory(You need to find the vue.js path after the local installation first, then replace this path with your latest local install path:/Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js)
ln -s /Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js /usr/local/bin/vue
View version number
vue -v
I was getting the same error because Node.js was not installed. My issue got resolved by installing Node.js using the following command:
sudo apt install nodejs-legacy
To see if you already have Node.js and npm installed and check the installed version, run the following commands:
node -v
npm -v
If both are installed then follow the steps here:
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
I installed the package using yarn global add #vue/cli on my Ubuntu box and found the binary in /home/vonkad/.yarn/bin.
I had to modify my /home/vonkad/.bashrc and add the directory to the path export PATH=$PATH:/home/vonkad/.yarn/bin.
To fix this situation, I had to add the following line to my .zshrc (maybe in your case is .bashrc)
export PATH="$(yarn global bin):$PATH"
Effectively, the yarn global bin is a folder where vue (vue-cli 3) was placed.
What helped me
mac os catalina with zsh terminal
Uninstalled node and npm using https://www.positronx.io/how-to-uninstall-node-js-and-npm-from-macos/
Downloaded node/npm from https://nodejs.org/en/download/current/
sudo npm install -g #vue/cli
vue --version (#vue/cli 4.5.4)
I faced the same issue and now resolved. In my case I installed Node.js and NPM using the default Ubuntu repository by using this command sudo apt-get install nodejs npm
The problems seemed like those 2 packages are not well maintained so it caused some bugs.
So I purge those packages and reinstall it from nodesource which is officially recommended way to install (reference: Installation instruction from nodesource) using these commands.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
Then reinstall #vue/cli again
sudo npm install -g #vue/cli
Now these issues have gone. Hope it helps some programmers.
You need to install vue via sudo like explained in the doc:
https://cli.vuejs.org/guide/installation.html
If you have WSL2 running and you use zsh like me, just add
yarn global add #vue/cli
# add this line to ~/.zshrc
export PATH="$HOME/.yarn/bin:$PATH"
$ vue --version
#vue/cli 4.x.xx
You can try the following code install see
npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev

TypeScript commands are not working even after installation

I have installed TypeScript from my command prompt using the
npm install -g typescript
command. After installation, I wrote
tsc --version
to check its version but that didn't work. tsc commands aren't working even after installing TypeScript.
Can anyone help me solve this problem?
When you install typescript globally with npm, tsc --version should work, but I've had issues with this - I believe this might be something with the local NPM environment.
Try
$ npx tsc --version
and
$ npx tsc --init
as per the Typescript download instructions at https://www.typescriptlang.org/download.
EDIT
It seems that with NPX you can locally run packages, which don't get globally installed, but they act like they were (This article explains it pretty well: medium.com/#maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). This only partially solve your problem, and I suspect that the real reason tsc didn't run in your case, is because the global installation didn't work for some reason. When typescript is properly installed globally, tsc works.
Run
npm install -g typescript
and to verify that typescript is installed, run
$ npm list -g --depth 0
Which will list typescript in the globally installed dependencies.
I don't know what exactly causes the issue, but I managed to reproduce the same issue just now - I installed typescript globally with NPM (v12.16.2, NVM v0.33.8), and typescript just didn't install, nor tsc was available. I kept trying npm install -g typescript, until I could spot typescript in my global dependencies, and from then on tsc started working.

What is npm run build command and how webpack is used in creating bundle file

What's the difference between npm run build and npm install webpack?
In what ways these commands differ
webpack is a module bundler for javascript application. In order to run webpack ypu need to get the webapck in your project.npm install webpack will install webpack from node module software library using npm install webpack command.
npm run build is a separate command to build the code. If you open package.json inside scripts you may see a key like build example
scripts:{
build:someValue
}

create Angular2 angular-cli project

I am trying to create Angular2 project using angular-cli. I run, npm install -g angular-cli then I ng new test, it returns
"'ng' is not recognized as an interal or external command, operable
program or batch file."
I check the directory, C:\node\node_modules\npm\node_modules. There was not angular-cli found. My npm version is 4.0.2 and my node version is 5.11.0. If you guys have same problem, could you help me how to figure this out?
From angular-cli docs
Prerequisites
Both the CLI and generated project have dependencies that require Node
6.9.0 or higher, together with NPM 3 or higher.
You need to upgrade your node and npm first.
1) As VadimB suggested, you need to upgrade node and npm versions. Install latest version of node from nodejs.org and make sure you choose minimum Node 6.9.0 setup.
2) You are trying to run wrong command.
Current version command is - npm install -g #angular/cli (Please note - # before angular/cli package in above command.)
3) After #angular/cli installation, you can use ng help or ng -v to check successful installation and version.
4) You are looking at wrong folder. Once installed successfully, #angular\cli will be available in C:\Users\<UserName>\AppData\Roaming\npm\node_modules\
Installing Angular Dependencies
Install a stable version of Node (if not already installed) and verify the installation using node -v
Install TypeScript using command npm install -g typescript
Download and install Angular CLI using command npm install -g #angular/cli
Angular is a component oriented framework. Many components needs to be created to make the whole application. A component is a group of custom elements, HTML elements, ShadowDOM & HTML imports.
Creating the Angular 4 app using Angular CLI
To create a fresh new Angular 4 app, use command ng new newAppName. This command takes some time to execute.
package.json - takes care of the development and app dependencies / packages / commands to execute
src\main.ts - takes care of the scaffolding the entire
src\app\app.module.ts - any newly created module has to added to the declarations and services has to be provided to the providers key parameter of the function #NgModule to make them accessible across the entire application
Run the Angular 4 app using Angular CLI
To run the freshly created app using CLI, use command ng serve which will run the app on http://localhost:4200/.
Use this code :
npm install -g #angular/cli

Uncaught Error: Could not find module ember-radio-button/components/radio-button

Have added ember-radio-button to my project in ember-cli
version: 0.1.2
node: 0.10.24
npm: 2.1.3
Works fine until I build in production mode.
Then in the console I get :
Uncaught Error: Could not find module ember-radio-button/components/radio-button
Using the install instructions from ember-radio-button I did:
npm install ember-radio-button --save-dev
I notice that it doesn't end up in the bower_components folder.
And bower has never heard of it.
Not sure how to get it in there or what to put in the brocfile.js
Any suggestions please?
Thanks
Vida
You issued npm install, so you installed a Node package and you'll find it in node_modules.
You'll find a package in bower_components if you install it with bower install.
There are two ways for the component to be added in your production build.
The add-on provides a generator that installs it from node_modules/ to bower_components/, ask the add-on author for this. Example command: ember generate ember-foobar-addon
Manually install the components directly into bower_components.

Categories

Resources