Use es2015-loose Babel preset in production build

[taion]

Almost every React package that I'm aware of uses the loose version of the preset to transpile, given that es2015-loose produces code that's easier to understand and more performant.

As such, it would probably make the most sense to use es2015-loose at least for the production Babel config. There are a few edge cases where it allows illegal code to work, so it may not be appropriate for the development config, but I think any "serious" production Babel config should be expected to use es2015-loose rather than es2015.

[taion]

Lifted from #189 (comment):

Loose mode generates code that is simpler, but less strictly compliant to spec. Compare output:

• es2015-loose
• es2015

I'm not aware of any reason to not at least run your production build in loose mode. I'm also not aware of anybody who deliberately uses non-loose mode.

[lacker]

Disclaimer: everything I know about loose mode I learned from this blog post: http://www.2ality.com/2015/12/babel6-loose-mode.html

That said, from that link:

Normally, it is recommended to not use loose mode. The pros and cons are:

Pros: The generated code is potentially faster and more compatible with older engines. It also tends to be cleaner, more “ES5-style”.
Con: You risk getting problems later on, when you switch from transpiled ES6 to native ES6. That is rarely a risk worth taking.

Do you disagree?

Also, it appears from npm stats that regular mode is about 20x as popular as loose mode. So es2015-loose is at least not the most popular thing in the community.

[taion]

@lacker

These are the most prominent examples I can think of from around the React ecosystem:

Redux: https://github.com/reactjs/redux/blob/v3.5.2/.babelrc#L3-L18
React Router: https://github.com/reactjs/react-router/blob/v3.0.0-alpha.2/.babelrc#L7-L11
React-Bootstrap: https://github.com/react-bootstrap/react-bootstrap/blob/v0.30.0/.babelrc#L4 (I know it's still on Babel 5... sigh)

React: https://github.com/facebook/react/blob/v15.2.1/.babelrc#L11-L19
babel-config-fbjs: https://github.com/facebook/fbjs/blob/eslint-config-fbjs-v1.0.0/packages/babel-preset-fbjs/configure.js#L60-L68

I'm not exaggerating when I say that I'm not aware of any packages that are intentionally not using loose mode.

There might be an argument for e.g. running test suites against both loose mode and strict mode, but I'm not aware of anybody who actually does so.

As far as I'm aware, almost all "real" projects just use es2015-loose, when their authors are aware of that option.

[vjeux]

We use loose mode inside of fb on react native

[gaearon]

I'm good with using loose mode.

[hzoo]

Same with babel itself https://github.com/babel/babel/blob/master/package.json#L50

You would think it would be the opposite; that you would want to run more spec compilant 😄, what about add-module-exports then https://github.com/59naga/babel-plugin-add-module-exports?

[gaearon]

We want people to use import and export over require so I probably wouldn’t go with it.

[vladshcherbin]

I've seen only one piece of code, that didn't work the same in loose mode:

Code from SO answer won't give you the same in loose mode

[...Array(10).keys()]
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-
//=> [ArrayIterator] in loose mode

Similar example from - developer.mozilla.org, denseKeys output won't be same in loose mode.

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]
-
console.log(denseKeys);  // [ArrayIterator] in loose mode

[insin]

I'd say babel-plugin-add-module-exports is only necessary for stuff you'll be publishing to npm, so your non-transpiling users don't have to eat a .default.

Most non-official Babel plugins I've tried have needed a .default tacked on, which is a bit of a mess :/

[hzoo]

Right this would probably be for an application anyway and everything in here would be import/export like Dan mentioned

@vladshcherbin that's because in loose mode that transpiles to [].concat(Array(10).keys()).

[].keys returns an iterator and non-loose mode does a Array.from() call to turn it into an array

[vladshcherbin]

@hzoo yes.

There should be a note somewhere that babel in production is in loose mode as this examples will work different in dev / production and especially for a novice it won't be obvious to understand what's wrong.

[gaearon]

If we enable loose, we enable it everywhere. Having differences between dev and prod is bad.

[ForbesLindesay]

Ideally I think we'd like a loose-with-warnings that behaves exactly the same as loose mode, but console.warns whenever you do something that would behave differently in strict mode.

We cannot have different behaviour in production vs. dev (couldn't agree more on that point) but we can/should warn users in development mode.

[gaearon]

Are there any lint rules against things that loose does differently?