babel-preset-live

Babel preset for the Live Ecosystem.

Install

npm install --save-dev babel-preset-live

Usage

.babelrc

{
  "presets": ["live"]
}

Semver ranges (floating) vs exact versions

There is a trade-off between risk of breaking changes vs. server startup times (e.g. babel-register), and compile times (e.g. gulp-babel), and convenience of bug fix/feature-upgrades without having to modify this preset.

Our choices are discussed below.

Updating dependencies

BE CAREFUL! - A word of caution

Things that can go wrong:

• you will have insanely slow compile times from duplicate dependencies in npm2.
• you will find it impossible to return your production app to a working state because it is not possible to peg all your dependencies (except using shrinkwrapping which has its own issues and will cause lots of dupes).
• you will get compile errors from version inconsistencies and not know why.

All these things can be a nightmare when you need to quickly push a fix. So follow the below instructions when modifying this preset...

We want to maintain compatibility with npm2 because npm3 is slow.

If babel-runtime is not in babel-preset-live's node_modules, this may be because we are npm-linked and want to use our project's babel-runtime to reduce duplicates.

1. Nuke rm -rf node_modules
2. Remove all dependencies except the babel-presets-* from the package.json.
3. Run npm-check -us (or ncu) to update their versions. Set them to exact versions on the package.json.
4. Run npm install.
5. Run npm dedupe.
6. Run npm ls --depth=0. Add each top-level dependency to node_modules, ensuring that the utils, helpers, and runtime are floating versions, but the babel-presets-* are exact versions, and the plugins in index.js should be exact versions too.
7. Then run npm install again.
8. Run require-time and update the Changelog heading in this README.

Updating your projects

• Update the exact version of babel-preset-live. Use npm-check -us.
• To avoid multiple babel-runtime's being pulled in, use a semver range.

Design decisions

• See "How it works"
• We use require statements inside index.js instead of strings to allow easier benchmarking of the require time. See below.

Performance

• Keep a close eye on your server startup times. If there are duplicate babel dependencies it can add 5 seconds to require('babel-presets-live').
• Install and run require-time babel-preset-live in your project dir to check the require times.
  • NOTE: babel-runtime does not have a main and will not work.
  • I'm not sure this is an effective way to measure - haven't checked if presets have mains...

How it works

The plugins (i.e. babel-plugin-transform-es2015-classes) inside the presets (i.e. babel-preset-es2015, etc.) depend on the same Babel helper modules (i.e. babel-types, babel-template, etc.). Nearly everything (both helpers and plugins) depend on babel-runtime.

npm2 will only dedupe one level down, and will only do it on a fresh install.

This means that if just the presets were installed you would have several copies of babel-runtime which would each have to be parsed by Node. Super slow!

If you deduped only the helpers, you would have about 10+ babel-runtimes. Insanely slow.

So to win, you must dedupe it all. But because npm2 does not dedupe by default, after you run npm dedupe, you must manually add these dependencies to your package.json.

An important point is to leave the helpers and runtime with floating versions. This ensures that as the dependencies of the plugins are updated, when the user performs a fresh install of babel-preset-live, our top-level deduped helpers can resolve to the correct versions preventing duplicates without us having to update them manually. When Babel fixes a bug, the user can simply rm -rf node_modules/babel-preset-live && npm install babel-preset-live.

Alternatively, we could not rely on the presets and peg the versions of all the plugins we use. This would create more maintenance when Babel updates, so we will avoid this for now.

Future work

• Depend on babel-preset-stage-0, babel-preset-stage-1, etc.
  • Probably want to look at what npm3's behaviour is - I'm not sure if it would dedupe the presets because they are not shared.
• Depend on plugins instead of any presets (babel-preset-es2015, etc.)
  • We might want to depend on other presets - they are convenient.

Changelog

03/06/2016

• Updated everything to latest versions.
• require-time = 892ms

Troubleshooting

Compile errors

• Remove all babel-* dependencies from your project and run npm install.

Compile/server-startup is slow

• Run npm ls and ensure that there are not many duplicates.

npm linking to babel-preset-live

• If you are linked, you might want to delete babel-runtime from node_modules to ensure that your project's babel-runtime version will be used to prevent duplicate parsing.
  • You could also remove lodash, debug, core-js, etc. if you use them in your project too. But this may break other modules also linked to this one.
  • Use tools like require-times and time-require to see what modules are being required.
  • This is probably better done with a deduping module that modifies require.