babel-preset-meridian
v1.0.0
Published
Shared babel configuration for Meridian projects.
Downloads
5
Readme
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://[email protected]/joefraley/babel-preset-meridian.git
If you DON'T run babel over your webpack config:
$ npm i -D babel-preset-meridian@git+ssh://[email protected]/joefraley/babel-preset-meridian.git#legacy
Use
NOTE: This config won't work without Webpack 2
// package.json
{
"devDependencies": {
"babel-preset-meridian": "git+https://github.com/joefraley/babel-preset-meridian.git",
"webpack": "2.2.0"
}
}
// .babelrc
{
"presets": ["meridian"]
}
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
import { debounce } from 'lodash'
// webpack will only include debounce and throw the rest of lodash away during compilation.
// webpack.config.js
import Webpack from 'webpack' // <--- doesn't work, because webpack itself handles imports now
const Webpack = require('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
See https://www.npmjs.com/package/babel-preset-react
Makes JSX possible and includes some other junk that Facebook likes (like flow-strip-types).
import React from 'react'
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
See https://babeljs.io/docs/plugins/transform-decorators/
Eventually Babel will incorporate this into babel-preset-latest
and it won't be needed. Just waiting on the final decorators spec.
import autobind from 'autobind'
import React from 'react'
@autobind // <--------
class Button extends React.Component {...}
babel-plugin-transform-class-properties
See https://babeljs.io/docs/plugins/transform-class-properties/
class Button extends React.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').then(({ Component }) => {
class Button extends Component {...}
})
babel-plugin-transform-do-expressions
See https://babeljs.io/docs/plugins/transform-do-expressions/
Makes this possible:
const Component = props =>
<div className='myComponent'>
{do {
if(color === 'blue') { <BlueComponent/>; }
else if(color === 'red') { <RedComponent/>; }
else if(color === 'green') { <GreenComponent/>; }
}}
</div>