Alternate build systems

[natecavanaugh]

Heya Maira,
As I mentioned in #2, setting up an alternate build system seems like kind of a nightmare currently (or maybe I haven't found the documentation for it), but currently, I've tried using both webpack and rollup, and they both seemed to involve a lot of working around which dependencies to compile (and which plugins to include, etc).

It seems like many of the metal modules aren't actually publishing transpiled files, but are instead publishing pure ES6.
So for webpack, I ended up having to do something like:

  include: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules/metal/src'),
      path.resolve(__dirname, 'node_modules/metal-jsx/src'),
      path.resolve(__dirname, 'node_modules/metal-dom/src'),
      path.resolve(__dirname, 'node_modules/metal-events/src'),
      path.resolve(__dirname, 'node_modules/metal-incremental-dom/src'),
      path.resolve(__dirname, 'node_modules/metal-state/src'),
      path.resolve(__dirname, 'node_modules/metal-component/src'),
      path.resolve(__dirname, 'node_modules/lodash-es'),
  ]

And add the "add-module-exports" plugin into my babelrc.

And for rollup, I had to use the commonjs plugin and nodeResolve plugin in order to get the metal modules compiled, but I had to remove the babel metal preset, and remove the "add-module-exports" plugin.

I totally get why these may not be 100% compatible (rollup and webpack), but it seems like the metal side should be pretty predictable (or at the very least, not require the consumer to have to pick and choose which node modules they need to compile).

Maybe this is just a matter of documentation (or my gross lack of understanding), but do you think there's anything that can be done to make this simpler?

Thanks again Maira!

[mairatma]

We actually have an example showing how to build code using metal via webpack. You basically just need to use the babel metal preset, and then you don't need to include each path by hand anymore. It works well. I'm also using webpack for the components I'm preparing for the ZOE team, with a similar configuration, but using jsx (metal-examples always use soy instead, since it was built before jsx was ready).

The repo that contains this webpack example also has others that can be used as well. Rollup is not there yet though, I have it as a TODO on a private list, but I'll create an issue there now to document that this will be done. I believe it should be possible to add a simple configuration that would work with that too.

I agree that we need documentation for people to know that this repo even exists, and improving those docs is also on my list of things to be done soon, which includes adding references to this repo. I'm a bit busy working on the ZOE components right now, but I'll find some time to document all the things I have planned so that

[natecavanaugh]

Heya Maira,
Sorry for the delay, I was actually planning on responding sooner.

But thanks for the info about the example. That's actually pretty awesome to hear and see :)

If you prefer, I think this is good to close for now then. Feel free to reopen if you want to use it to track the docs tasks.

Thanks again Maira!

[mairatma]

Thanks, good to know that this was helpful :)