babel-preset-meridian
Shared babel configuration for Meridian projects.
Install
If you run babel over your webpack config:
$ npm i -D babel-preset-meridian@git+ssh://git@github.com/joefraley/babel-preset-meridian.git
If you DON'T run babel over your webpack config:
$ npm i -D babel-preset-meridian@git+ssh://git@github.com/joefraley/babel-preset-meridian.git#legacy
Use
NOTE: This config won't work without Webpack 2
// package.json
// .babelrc
That's it!
The only relevant file is index.js. It contains comments explaining each of the needed presets and plugins. It exports a babel configuration containing all the following:
Presets
[babel-preset-latest, { es2015: {modules: false} }]
See https://twitter.com/joseph_fraley/status/832688588445749249
{ es2015: {modules: false} }
allows Webpack 2 to conduct treeshaking, but it means that babel will not understand ESModules without Webpack's help.
// index.js// webpack will only include debounce and throw the rest of lodash away during compilation. // webpack.config.jsconst Webpack = // <--- you just gotta do this in files not compiled by webpack that you expect babel to read, for example when using babel-node node_modules/.bin/webpack
babel-preset-react
Makes JSX possible and includes some other junk that Facebook likes (like flow-strip-types).
const Button = <button />
Plugins
babel-plugin-transform-async-to-generator & babel-plugin-transform-runtime
See https://babeljs.io/docs/plugins/syntax-async-functions/#top
Both needed for async/await functions
babel-plugin-transform-decorators-legacy
Eventually Babel will incorporate this into babel-preset-latest
and it won't be needed. Just waiting on the final decorators spec.
@autobind // <--------Component ...
babel-plugin-transform-class-properties
See https://babeljs.io/docs/plugins/transform-class-properties/
Component static propTypes = ... // <---
babel-plugin-transform-object-rest-spread
See https://babeljs.io/docs/plugins/transform-object-rest-spread/
const props = a:1 b:2 c:3<Button ...props /> // Button.props === {a:1, b:2, c:3}
babel-plugin-syntax-dynamic-import
See https://webpack.js.org/guides/code-splitting-import/#dynamic-import
Makes webpacks lazy-load syntax possible. Used for code-splitting through react-router or something like that.
import'react'
babel-plugin-transform-do-expressions
See https://babeljs.io/docs/plugins/transform-do-expressions/
Makes this possible:
const Component = <div className='myComponent'> do ifcolor === 'blue' <BlueComponent/>; else ifcolor === 'red' <RedComponent/>; else ifcolor === 'green' <GreenComponent/>; </div>