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
Related
which tool among those in above is used to solve what sort of problem? The simplified and straight to the point answer the better.
You can find some pretty good descriptions of each of these with a basic Google search.
In short, npm is a software repository. Grunt is a tool used bring together multiple javascript tasks into single commands. Webpack is a powerful module bundler, allowing you to bring together javascript, css, html from various sources (one being npm) and bundle them in such a way that you can be left with a single javascript module containing all the code you require.
The World's Largest Software Registry (Library)
npm is the world's largest Software Registry.
The registry contains over 800,000 code packages.
Open-source developers use npm to share software.
What is NPM # W3Schools
Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm.
What is Grunt # Wikipedia
webpack is an open-source JavaScript module bundler.[5][6][7][8] It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.[9] webpack takes modules with dependencies and generates static assets representing those modules.[10]
Webpack takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes
What is Webpack # Wikipedia
difference between grunt and webpack
grunt is stream management tools that perform functions required by users through task configuration, such as format verification, code compression, etc. It is worth mentioning that the code processed by grunt is only replaced by local variable names and simplified. Nothing has changed, it's still your code.
While webpack has carried out a more thorough packaging process, and is more inclined to transform the module grammar rules. The main task is to break through the gap between browsers, analyze, compress, merge, and package various static files that are not originally recognized by the browser, and finally generate the code supported by the browser. Therefore, the code after webapck has been packaged. It’s not the code you wrote, maybe if you look at it again, you can’t understand it anymore.
npm is more like providing building enviroment
npm is a package management tool installed with NodeJS. It can solve many problems in NodeJS code deployment. Common usage scenarios are as follows:
Allow users to download third-party packages written by others from the NPM server to local use.
Allow users to download and install command line programs written by others from - the NPM server for local use.
Allow users to upload their own packages or command line programs to the NPM server for others to use.
npm is more like providing build enviroment, but grunt and webpack is working as building tools.
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.
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 see this package called gulp-copy and I can't see anywhere if it's adopted for the latest version of gulp. Is that never an issue? I'm worried that I happen to pick wrong package constellation or perhaps an obsolete configuration all together.
Questions are:
In this particular case, does the linked gulp-copy work well with gulp 4?
Is there a general way to determine which packages work well with gulp?
There is no generalized way to determine whether a certain package only works with gulp 3 or gulp 4 (besides reading the documentation for that package). Package creators cannot programmatically specify what version of gulp their package supports and there's no warning when using a package that's designed for a different version of gulp.
That being said, there are some heuristics you can use depending on what kind of packages you are dealing with:
General node packages: those are packages that were not specifically designed for gulp at all. You can use them with gulp, because you can use any node package with gulp, but they make sense outside of gulp as well.
These packages should work with any version of gulp since they don't contain gulp-specific code and are therefore independent of any changes made to gulp. Examples that are often used with gulp are merge-stream and del.
Gulp-specific packages on the other hand can be affected by changes to gulp.
Among those there's gulp plugins which are packages that are supposed to be used in gulp streams with .pipe(). Their names almost always start with gulp-, they are tagged with gulpplugin on npm and listed on the GulpJS website.
These should also generally be safe to use with any version of gulp. Gulp streams are just regular nodejs streams, so those plugins should work with either version of gulp (although nodejs streams have their own history of compatibility problems, but that's not really relevant anymore). Barring major changes to the vinyl file format there's not much that can happen that might affect gulp plugins.
The gulp-copy plugin that you mention falls into this category and should be safe to use with both gulp 3 and gulp 4.
All that being said there are a few gulp plugins that only make sense for a specific version. gulp-plumber for example fixes an annoying issue with error handling in streams that is only necessary for gulp 3, but not gulp 4. gulp-src-ordered-globs circumvents a problem with ignore patterns in gulp 3 that's fixed in gulp 4.
Finally there's what I like to call gulp extensions. They're not supposed to be used with .pipe(). Instead they extend the capabilities of gulp in other ways.
These are the ones you need to watch out for. A lot of them deal with gulp's task running capabilities which have undergone major changes between gulp 3 and gulp 4. There's probably many packages in this category that only work with a certain version of gulp.
I wouldn't worry too much about it though. Most of those packages will prominently display their limitations in their documentation. run-sequence for example has a big fat note at the top informing the user that this is a temporary solution for gulp 3. I published a package named gulp-parameterized the other day that only works with gulp 4 and it screams so in all-caps at the top of the docs.
Basically scan the documentation of any package you want to use for these kinds of notes and you should be relatively safe.
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.