Use Babel for builds

[SachsKaylee]

Webpack is meant for the final bundling of a code base. Libraries are better built using raw Babel.

• Allows us to scale better as the project grows in size
• Allows us to provide a version with polyfills etc already included
• Allows the user to use their own module bundler/polyfills/etc... if they want to

See #31 for details & discussion.

[AndrewRedican]

Okay, we'll need to update tests.

[AndrewRedican]

A couple of things I've encountered while updating Jest with this new setup. (Still not finished).

1. Apparently Jest only uses .babelrc, so I am reinstating that file (with updated babel 7 transforms). My concern is if the build setup will get confused and use .babelrc instead of babel.config.js. I haven't checked. I don't like the idea of having both files on the setup either as it could be rather confusing for a new set of eyes.

2. Another thing Jest was getting confused over was seeing more than one package.json with the same project name in it. I've added addtitional configuration to ignore the /dist/ folder since the current test uses the source code. This may change as we will probably need to run tests on the distribution version, in which case, I'll have to find a way to ignore /src/ folder instead.

3. A thing I still have not been able to solve is that Jest no longer undertstands ES6 import and destructuring as it used to. This is no longer valid. It could be either webpack did some transforms prior reaching babel, or babel7 does not cover this where babel6 could. See similar discussion. In short, the following is no longer valid in Jest:

import Enzyme, { shallow, render, mount } from 'enzyme';

Still figuring this one.

[AndrewRedican]

Found a possible solution to item 1 here jestjs/jest#1468 (comment).

[SachsKaylee]

Apparently Jest only uses .babelrc, so I am reinstating that file (with updated babel 7 transforms).

Interestingly when googling around I found some tickets from people who had the opposite problem: Their .babelrc not being read, so they had to use babel.config.js instead.

Anyways, I don't think that we can use .babe.rc since it's just a JSON file. Our setup determines the different presets, etc. to use programmatically at build time using the JavaScript in babel.config.js.

Is this section of the documentation of any help? https://jestjs.io/docs/en/getting-started.html#using-babel

This is no longer valid [...] import Enzyme, { shallow, render, mount } from 'enzyme';

Looking at the Enzyme type definition, it doesn't look like Enzyme actually has a default export. Does using import { configure, shallow, render, mount } from 'enzyme'; or import * as Enzyme from 'enzyme'; fix the issue?

[AndrewRedican]

Setting useESModules to false fixed the issue import / export issues on test. See useesmodules

[SachsKaylee]

Setting useESModules to false fixed the issue import / export issues on test. See useesmodules

This is awesome! With the transformer we are actually able to re-use our existing babel.config, allowing us to keep configuration babel in a single place.

[AndrewRedican]

I think we are good place now. Free free to add items to the CHANGELOG.md, possible update README and/or github wiki.
Let me know so I can merge.
I won't be publishing until I add a few tests and fix #32.

[SachsKaylee]

I'm ready to merge at this point.

I won't be publishing until I add a few tests and fix #32.

Sounds good! 👍