Switch to Webpack

[jamesplease]

Esperanto and Rollup rely on Acorn, which doesn't seem like a tool that is likely to support as many features as Babel (for instance, stage 0 proposals). Perhaps it's time to look into other module loaders (webpack?) to see if any exist that offer full Babel support.

Ref #218

Todo:

• build for browser tests with src maps
• ensure browser tests can be written in ES2015+
• build for distribution with src maps
• Update README with future ES support

A few things left to do for browser tests:

• Prevent double linting nvm this wasn't happening. I was misinterpreting the command line output

[ghost]

@jmeas You have plans for adding webpack? Any links to a site using this boilerplate with webpack?

[jamesplease]

You have plans for adding webpack?

Maybe, not sure yet. Gotta do some research when I've got time.

Any links to a site using this boilerplate with webpack?

Nope.

[jamesplease]

I'll likely switch to webpack if it:

1. has no acorn dep (so that all Babel features work with it)
2. can replace esperanto and browserify (for production bundling and test bundling)
3. supports proxying require calls in node and the browser

[jamesplease]

Some history:

• I thought I had considered Webpack once before, but I can't find any history of that
• I used 6to5 originally with that old wrapper file
• Shortly after, I added Browserify to enable testing in the browser
• @thejameskyle recommended I could get rid of the wrapper file by either extending Babel. I opted for Esperanto instead. Conversation here: Module Formatter instead of wrapper file #30

My decision to stay away from Webpack was likely just because it's pretty tough to get set up on. But figuring out the maze of build tools I'm using now is certainly no simple task! If Webpack can untangle all of this mess, then by all means I should use it.

[jamesplease]

The last remaining issue is replacing Browserify with Webpack for the browser spec runner. I was having one issue where it was difficult to get Webpack to take multiple entry points and concatenate them. I added gulp-concat to manage that for me, but it's not working when watch is set to true for webpack.

I thought it might be that that that option must make it a never-ending stream, so it never gets past it, but I think it's that webpack-streams doesn't emit a thing that concat can consume.

[jamesplease]

I might be able to achieve this with dynamic requiring. In pseudocode:

// test/setup/browser.js

// Get an array of test file names
var tests = resolveAllTestFiles();
tests.forEach(filename => require(filename));

No idea if this is possible...but it probably is, because Webpack is insane.

[jamesplease]

For live reloading, webpack-stream offers a third argument that is a callback! Yes!

[jamesplease]

I fixed the problem with gulp-concat after webpack-stream in shama/webpack-stream#80, but it doesn't help. When webpack's watch is run, it doesn't cause concat to be run again, so it's kinda worthless to me.

Is there a way to get webpack working with gulp.watch in a nice way? What I did with browserify was use watchify, which had the capabilities to do n=>1 building. I opened an issue on Webpack's issue tracker (webpack/webpack#1506) to see if this was possible using Webpack.

If none of this ends up working, and I must stick with Browserify, then the next steps would be figuring out to get browserify to support module proxying.

[jamesplease]

Another route to try with Webpack is the developer server. This would basically move me 100% off of Gulp for the browser tests, but maybe that's okay? One concern is how to make listing work as the user changes files.

[jamesplease]

Nice. The last missing piece I needed was n=>1 bundling, which is provided by the LimitChunkCountPlugin (explained to me in this issue webpack/webpack#1506 )

Pretty excited!

[jamesplease]

Done!

[alex88]

@jmeas I've just installed the latest version but I still get the [DEPRECATION NOTICE] Esperanto is no longer under active development. To convert an ES6 module to another format, consider using Babel (https://babeljs.io) error, what should I do?

[alex88]

Nvm, my fault, just seen it's in the v6 branch!

[jamesplease]

Hey @alex88 , this is a technicality, but that's not an error, just a warning. Esperanto is great! I'm still using it on a few projects I haven't migrated over yet. Sorry for the slow release of v6; I'm balancing life and work 🙂. Feel free to help out if you've got time!