Echo JS 0.11.0

<~>
ashleynolan 3041 days ago. 
I’m currently looking at moving towards using ES2015 native module loading and have been looking into different tools that can help do this – the big 3 seemingly Browserify, Webpack and JSPM (combined with Babel).

I’ve used Browserify a lot before, but reading recent articles on the subject it now seems to be getting left behind in favour of WebPack and most specifically JSPM.  We currently use Gulp for our front-end build so ideally I want it to fit alongside this.

Which tool is the best to use for this?  Interested to hear what people are using for this at the moment and reasons why over the alternative tools out there.

Thanks!

belfz 3041 days ago. link 3 points ▲ ▼
In my career I used requirejs, browserify and webpack.

I currently find webpack the best. Contrary to many opinions its very easy to configure (along with Babel and JSX preprocessors). And it's much faster than browserify (IMHO).
Webpack also comes with a lot of features out of the box (like concatenating, minyfying and producing source maps) without the need to add separate packages.

Webpack is currently my number one choice. Browserify is good. Requirejs is something I'd rather not go back to.
MatthewPhillips 3041 days ago. link 2 points ▲ ▼
If you are interesting in JSPM you might consider looking into StealJS as an alternative: http://stealjs.com/

StealJS is a little like JSPM in that it runs in the browser meaning no build step required for development. However unlike JSPM StealJS uses NPM for package management (just NPM install stuff like you normally would) and requires very little configuration. Additionally the build tool, steal-tools has a bundling optimizer that works really well with progressive loading (you only load the code needed to render the page).

StealJS is a part of DoneJS (http://donejs.com/) which is a full stack framework. It has some additional cool features like adding only the needed CSS for a particular page (meaning if you're on the /cart page it will add cart.css into the <head>).
amenadiel 3038 days ago. link 1 point ▲ ▼
I was so committed to JSPM until 5 minutes ago when I visited StealJS. 

It's like someone described to me a software that automates what took me dozens of hours to define.
ColCh 3041 days ago. link 2 points ▲ ▼
Webpack reads your code and finds all module dependencies, for each module. It stores this info in a single tree.

This means you can optimize your dependencies.
Or analyze entire tree after bundling: https://webpack.github.io/analyse/

After version 2.0.0, it will be possible to eliminate dead export code: http://www.2ality.com/2015/12/webpack-tree-shaking.html

Also, it has other killer features like dev server, hot code push and other...

In shorten, Webpack is better.
codylindley 3041 days ago. link 2 points ▲ ▼
You should use:

https://github.com/ModuleLoader/es6-module-loader

or 

https://github.com/systemjs/systemjs

and use JSMP to load anything from npm or github.

This is the choice of things like Aureila and Angular 2

To be clear, when speaking about loading we are only talking about four solutions. Webpack. Browserify. SystemJS (using es6-module-loader), or rollup.js (http://rollupjs.org/)

An amazingly good course was just released on systemJS:

https://www.pluralsight.com/courses/javascript-systemjs-jspm
charliepops 3041 days ago. link 2 points ▲ ▼
So far, my #1 choice is webpack + npm. Webpack may seem weird to config in the beginning but after using it, you realize you  are saving a lot of time that you spent with other tools.
amitport 3041 days ago. link 2 points ▲ ▼
assuming you don't have development time to waste - do not make a research topic out of selecting build tools - choose one - start working - don't use features you don't need - if you encounter issues - try something else
-just build your product!-

(ps, I like jspm, but really, just pick one and move on to real coding)
ashleynolan 3041 days ago. link 1 point ▲ ▼
If I was working in a smaller team, I’d definitely do that.  Problem is, the choice I make impacts on 30-40 developers and this means it takes time to change workflow tools and process (as well as re-educating people on the tools we’ve chosen).  It also doesn’t inspire confidence in your choices if you try and switch workflow tools every couple of weeks/months!

I’m playing around with a JSPM setup atm, but wanted to get opinions off devs who have more experience using it than me.  

I find it’s always useful to ask the question and see what comes out of it!
amitport 3041 days ago. link 2 points ▲ ▼
The thing is jspm, browserify and webpack are not exactly comparable. They do some different things and do them differently. 

What I was trying to say is basically this:
If you ask a general question people will answer based on their perspective, which isn't necessarily aligned with your requirements and thus not really helping your decision making.

You should focus on your specific requirements and work from there.

For me, gulp takes care of pre-build/deployment issues, so I don't need those features from webpack. On the other end, jspm, beside including a module loader (systemJs) is also a 'package manager' that is comparable to bower but more generic. I find this to be very useful when you start mixing packages from different sources that use different module systems.
alonronin 3041 days ago. link 2 points ▲ ▼
Webpack all the way. And using NPM as build system.
amenadiel 3038 days ago. link 1 point ▲ ▼
I'm using RequireJS in my main project, in production. The latest modules have the es6 module syntax, so I'm transpiling them via requirejs-babel.

I've iterated to replace RequireJS with Alameda and now Cajon, but those three are from the same author so those are just drop-in replacements.

For the new projects and the develop branches, I'm using jspm and I'm loving it. However, you can't just use SystemJS as a drop-in replacement for RequireJS if you use loader plugins.

About webpack... I guess I didn't learn it on time and it might get superseeded by jspm and rollup, so I guess I'll pass. Same goes for browserify.
chimon2000 3040 days ago. link 1 point ▲ ▼
I have used webpack and browserify, and I am currently examining rollup. What stuck out to me for rollup was the smaller footprint vs the other 2: https://github.com/nolanlawson/rollup-comparison. 

Rollup allows you to easily use ES2015 modules similar to JSPM,however according to their site JSPM is meant more for application development rather than module development. This is confirmed in the fact that JSPM may be using rollup internally in the future: https://github.com/systemjs/builder/pull/205.

If you are concerned purely with module bundling, you want a small footprint, and you want ES2015 syntax but build towards every format, you can't go wrong with rollup. If you are more concerned with building an application then you'll probably want to gravitate towards the other 3.
nachoalvarez 3040 days ago. link 1 point ▲ ▼
Go for JSPM. JSPM only responsibility is module management. That's what makes it suitable to use alongside gulp, so gulp can take care of task automation. They integrate super nicely too (https://github.com/nachoaIvarez/es6-webapp-starterkit). 

Since JSPM it's built on top SystemJS, that means you can use all kind of dependencies: RequireJS, AMD, CommonJS, global shims, and most importantly ES6 modules, all of them with the ES6 module syntax. And you can get those dependencies from all providers, such as npm, bower, github, etc. They just end up available like import io from 'socket-io'. That's cool. No ../../../(node_modules|bower_components)/* garbage.

Webpack cares for module loading, but it does not support all format out of the box, and I doubt you can use all types of modules as ES6 modules. Webpack also takes care of the build process, so using it alongside gulp will be a total overkill.

Webpack and JSPM are both great, but if gulp is already part of your build process, I would recommend JSPM all the way.

I won't use browserify.