What is the difference between webpack and npm? Should I be using them both? What are the pros and cons of using webpack and npm? Which one more preferred? Is it necessary to learn webpack when you know npm?
npm and Webpack are two completely different tools that do completely different things.
npm is the default package manager for JavaScript. It is a huge registry of packages for all kind of JS development. It is highly unlikely that you will not need it.
Webpack is a module bundler. It is mostly used to manage JavaScript codebases, most often for usage in the browser, and requires Node.js to use.
To answer question : Webpack (and all its associated plugins) is on npm (https://www.npmjs.com/package/webpack). So, you need to know what npm is and how to use it to use Webpack. But you might not need Webpack. There are other solutions to bundle browser JS code, like Rollup or Parcel.
Related
I have just started learning Vue.js. The author is using npm install -g vue-cli but it did not work with me because I got stuck with technical issues and I tried many solutions to fix it but I couldn't.
So I want to follow up with the author but using npm install -g #vue/cli. So Do you think I it will be easy to follow up with him? I mean are these different versions use different syntax?
The vue-cli package seems to be the old cli. The main difference between this version and Vue CLI 3 is that the webpack configuration used to be visible in the project as a build directory. To make changes to the build process you used to have to modify files within this folder. In Vue CLI 3 this has been moved to a helper that consumes a configuration file vue.config.js in the project. The structure of files has been slightly altered in this version of the CLI. Both work with Vue 2.x, so the way you write .vue files has not changed in any way.
Overall you should have little trouble following the tutorial, unless you are going to make changes to the build process. In that case, simply consult the official documentation or find a tutorial that is specifically for Vue CLI 3.
Recently, node package manager is very popular and doing a lot of job for us, however it is really difficult to understand what is going on under the hood. I really like simple tags to insert Vue, Babel etc. Haven't worked on big projects, I really wonder is there any disadvantages using script tags over npm-cli.
When you npm install a library, plugin, extension, etc it can be declared as a dependency with a --save flag. In doing so it is marked as a dependency in your package.json file, which is key to version control for your dependencies. If you just use the CDN you are pulling in a path to a library that may be deprecated at some point in the future.
During development it is ok to use CDNs, but in production it is not good practice for dependencies (though I do it for certain exceptions, such as a google font).
I have an online site and Im going to overhaul it. While I cannot find any information about if I can use npm and some kind of package manager (e.g Webpack) on live site which is on shared host (which has latest Node.js, npm support etc), Im going to develope it locally and worry about "publishing" it later on.
Is there a way to somehow covert my current downloaded project to npm project or Im better off just starting a new project? This is rather confusing, I've never used npm before.
Im using WordPress, everything is run with PHP atm but Im going to overhaul it and use Node.js.
NPM can be used to collect and manage Javascript dependencies for the browser so as to create a stand alone front-end JS app. BUT, bower is probably a better choice.
NPM is designed to manage Javascript dependencies for projects that use NodeJS or use the CommonJS module format for requiring modules.
Bower is specifically a package manager (like npm or composer) but it is meant to manage browser based javascript dependencies.
Currently, javascript doesn't have a formally defined module/import system, so a number of competing require() functions are been produced. NodeJS comes with a require() function that searches the npm/ folder for modules. Browserify is a pre-processor that can scan the npm folder for a dependency and all of its dependencies and bundle them into 1 file for a browser to download (because browser's don't have a require() function because the JS standard doesn't have define one)
I might be rambling here, but you should probably look at bower, and then - at some point in the future - look at either browserify or requirejs to combine and optimize all the JS plugins for your front-end app.
Edit for clarity:
Basically there are 2 engines to run your JS application: the browser or NodeJS. NodeJS needs npm, the browser has no idea what npm is. If you want to write a clean, single page app, all JS front-end for a PHP backend, you don't need NodeJS, and therefore don't need npm. Using npm will prematurely complicate the development of a front-end browser app because it will force you to decide on a require() implementation (Browserify or Requirejs) right from the start.
I'm writing most new code with es6/babel/jspm. But module loading is not yet standardized so run into troubles with other team members using webpack, browserify etc.
This leads me to ask just what are the various workflows for babel module loading? Any pointers? Pros/Cons? Basically I need a way to at least provide the alternatives to our team.
I was using gulp + browserify but switched to webpack.
reasons:
performance
smaller output
less dependencies (webpack has minification and sourcemaps built in)
webpack examples (babel6)
https://github.com/glued/harp-babel/blob/master/webpack.config.js
https://github.com/glued/harp-babel/blob/master/webpack.production.config.js
gulp example (babel6)
https://github.com/glued/harp-babel/blob/babel-gulp-v6/gulpfile.babel.js
Can someone explain to me the difference between NPM, Bower and Composer.
They are all package managers - correct?
But when should each one be used?
Also, each one appears to have a json file that accompanies it, does this store all the packages you require so they can be installed by cmd line? Why do you need this file?
[update, four years later]
bower is deprecated, and should not be used anymore for new projects. To a large extent, it has been subsumed into node dependency management (from their website: "While Bower is maintained, we recommend using Yarn and Webpack or Parcel for front-end projects").
yarn came out of the wood as a better npm (fixing several of npm flaws), and this is really what you should use now, as it is the new de-facto standard if you are doing front-end or node development. It does consume the same package.json as npm, and is almost entirely compatible with it.
I wouldn't use composer at this point (because I wouldn't use php), although it seems to still be alive and popular
[original answer]
npm is nodejs package manager. It therefore targets nodejs environments, which usually means server-side nodejs projects or command-line projects (bower itself is a npm package). If you are going to do anything with nodejs, then you are going to use npm.
bower is a package manager that aims at (front-end) web projects. You need npm and nodejs to install bower and to execute it, though bower packages are not meant specifically for nodejs, but rather for the "browser" environment.
composer is a dependency manager that targets php projects. If you are doing something with symfony (or plain old php), this is likely the way to go
Summing it up:
doing node? you do npm
doing php? try composer
front-end javascript? try bower
And yes, the "json" files describe basic package information and dependencies. And yes, they are needed.
Now, what about the READMEs? :-)
https://github.com/bower/bower
https://www.npmjs.org/doc/cli/npm.html
https://getcomposer.org/doc/00-intro.md