Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do not compile with babel by default #4838

Merged
merged 8 commits into from
Nov 23, 2020
Merged

Do not compile with babel by default #4838

merged 8 commits into from
Nov 23, 2020

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Jul 3, 2020

This disables babel compilation by default, for both development and production builds, unless one or more of the following are true:

  • You have a babel config in your project. If so, then Parcel will pick it up and use it automatically.
  • You have defined targets in your package.json.
  • You have defined a browserslist in your package.json.
  • You use JSX, TypeScript, or Flow in your app.

If none of these are true, code will be passed through un-transpiled. In addition:

  • Babel compilation is turned off for node_modules. We used to attempt to determine the target of the module using its browserslist and compile it, but this is non-standard and possibly unexpected. We'll need to revisit this in collaboration with other tool authors.
  • To enable flow type syntax automatically, you must have flow-bin in the dependencies of the package.json in the root of your project.

The reasoning behind this is as follows:

  • In 2020, modern browsers supporting most modern JS syntax are very prevalent. It is now reasonable to only need a transpiler for future or non-standard syntax, which you would need to configure with a babel config anyway.
  • It's likely that you'll need a babel config regardless of Parcel's default, as soon as you add another tool that processes your code (e.g. a test framework, linter, etc.). This means that Parcel's default is really only useful if you're only using Parcel, which is unlikely. This is most likely to happen when you're just starting your project, or prototyping something quickly. In that case, you're probably testing in a modern browser anyway, so no need to transpile. If you need to support an older browser, it's super easy to add a browserslist to your package.json.
  • Not transpiling is significantly faster. On a benchmark, I saw 2x faster builds when not running babel (with no config, just parcel's default settings). After this PR, there's still a small perf hit to check for babel configs, but nothing even close to actually compiling.

Closes T-525

@height
Copy link

height bot commented Jul 3, 2020

This pull request has been linked to and will mark 1 task as "Done" when merged:

💡Tip: You can link multiple Height tasks to a pull request.

@parcel-benchmark
Copy link

parcel-benchmark commented Jul 3, 2020

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 8.90s -288.00ms
Cached 2.07s -22.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 234.00ms -177.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 316.00ms +33.00ms ⚠️
dist/legacy/index.45cccf70.js 1.10kb +0.00b 2.79s -232.00ms 🚀
dist/legacy/index.html 701.00b +0.00b 2.94s -235.00ms 🚀
dist/legacy/index.b3acc8eb.css 77.00b +0.00b 2.62s -176.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 1.68s +142.00ms ⚠️
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 1.58s -88.00ms 🚀
dist/legacy/index.html 701.00b +0.00b 1.75s +130.00ms ⚠️
dist/legacy/index.b3acc8eb.css 77.00b +0.00b 1.75s +130.00ms ⚠️

React HackerNews ✅

Timings

Description Time Difference
Cold 31.58s -674.00ms
Cached 2.02s +80.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/index.js 478.44kb -51.00b 🚀 13.83s -238.00ms
dist/PermalinkedComment.254739e9.js 4.22kb +0.00b 7.17s -439.00ms 🚀
dist/UserProfile.bb46ff21.js 1.70kb +0.00b 7.17s -439.00ms 🚀
dist/logo.24c8bf9e.png 274.00b +0.00b 141.00ms -21.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 478.44kb -51.00b 🚀 1.34s +16.00ms

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 3.11m -13.88s 🚀
Cached 5.27s -148.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/index.30ddb139.js 2.74mb -1.25kb 🚀 1.75m +135.00ms
dist/media-viewer.4c3f658c.js 71.88kb -271.00b 🚀 17.64s +355.00ms
dist/component.327022bf.js 30.85kb +0.00b 7.09s +1.44s ⚠️
dist/dropzone.498ec003.js 17.30kb -251.00b 🚀 1.02m -43.68s 🚀
dist/smartMediaEditor.a8b77894.js 16.90kb -251.00b 🚀 1.06m +1.06s
dist/workerHasher.9dc1181e.js 11.90kb +0.00b 1.74m +1.51m ⚠️
dist/EmojiTypeAheadComponent.8313d89f.js 8.61kb +0.00b 13.24s -1.51m 🚀
dist/component.fe59914e.js 6.19kb +0.00b 7.02s -2.59s 🚀
dist/card.7b75c38c.js 5.67kb -34.00b 🚀 17.64s +369.00ms
dist/EmojiPickerComponent.0c594241.js 3.68kb +0.00b 11.18s -652.00ms 🚀
dist/dropzone.cca9436f.js 3.32kb +0.00b 34.21s -24.41s 🚀
dist/16.984a552d.js 2.49kb +0.00b 1.90s -282.00ms 🚀
dist/EmojiUploadComponent.c023b9c0.js 2.22kb +0.00b 1.74m +46.20s ⚠️
dist/ResourcedEmojiComponent.4e7708b7.js 2.07kb +0.00b 7.04s +1.48s ⚠️
dist/date.1de12427.js 1.88kb +0.00b 7.67s +657.00ms ⚠️
dist/16.51a973ae.js 1.86kb +0.00b 9.91s +3.24s ⚠️
dist/images.bd2c65c2.js 1.82kb +0.00b 7.81s -3.00s 🚀
dist/16.664f2364.js 1.79kb +0.00b 7.02s +542.00ms ⚠️
dist/feedback.762993d4.js 1.78kb +0.00b 10.00s +2.33s ⚠️
dist/browser.4322401e.js 1.70kb +0.00b 1.01m -43.93s 🚀
dist/workerHasher.4a170deb.js 1.67kb +0.00b 13.24s -1.52m 🚀
dist/list-number.140c0835.js 1.60kb +0.00b 7.89s +742.00ms ⚠️
dist/status.eb990fdd.js 1.60kb +0.00b 8.13s +643.00ms ⚠️
dist/code.3d01c3f6.js 1.52kb +0.00b 7.67s +657.00ms ⚠️
dist/16.d03ef2ed.js 1.51kb +0.00b 7.28s +803.00ms ⚠️
dist/16.2560b363.js 1.46kb +0.00b 7.02s -2.71s 🚀
dist/16.3d2fa847.js 1.46kb +0.00b 7.27s +789.00ms ⚠️
dist/16.f8607434.js 1.45kb +0.00b 1.90s -282.00ms 🚀
dist/link.0f2a27b0.js 1.44kb +0.00b 7.89s +742.00ms ⚠️
dist/heading6.e4e9d5d4.js 1.44kb +0.00b 8.24s +577.00ms ⚠️
dist/16.a99d351e.js 1.44kb +0.00b 7.58s +710.00ms ⚠️
dist/heading3.94ce1091.js 1.43kb +0.00b 8.20s +533.00ms ⚠️
dist/16.c8c5e38d.js 1.40kb +0.00b 7.52s +649.00ms ⚠️
dist/emoji.ea46e5f5.js 1.37kb +0.00b 7.74s +721.00ms ⚠️
dist/16.039b21a1.js 1.36kb +0.00b 9.91s +3.22s ⚠️
dist/16.f10fd24d.js 1.34kb +0.00b 1.90s -283.00ms 🚀
dist/16.8938ddc0.js 1.32kb +0.00b 10.02s +3.33s ⚠️
dist/heading5.87b6dae6.js 1.31kb +0.00b 8.24s +577.00ms ⚠️
dist/16.955db3fc.js 1.31kb +0.00b 7.58s +699.00ms ⚠️
dist/expand.983a2c37.js 1.30kb +0.00b 10.00s -1.82s 🚀
dist/16.d58d6149.js 1.27kb +0.00b 1.90s -282.00ms 🚀
dist/16.3d8988cf.js 1.27kb +0.00b 7.28s +606.00ms ⚠️
dist/16.b709596e.js 1.26kb +0.00b 7.02s +542.00ms ⚠️
dist/16.202504a1.js 1.26kb +0.00b 7.27s +787.00ms ⚠️
dist/16.5ba30215.js 1.26kb +0.00b 7.28s +606.00ms ⚠️
dist/16.2da93a26.js 1.26kb +0.00b 7.02s -2.59s 🚀
dist/media-card-analytics-error-boundary.7bdb6beb.js 1.25kb +0.00b 34.15s -22.41s 🚀
dist/heading2.e0e7648d.js 1.25kb +0.00b 8.20s +713.00ms ⚠️
dist/16.a2db69a4.js 1.23kb +0.00b 1.90s -281.00ms 🚀
dist/mention.41dd4317.js 1.21kb +0.00b 7.97s +813.00ms ⚠️
dist/heading4.926b16d5.js 1.20kb +0.00b 8.24s +577.00ms ⚠️
dist/layout.a7a50d60.js 1.19kb +0.00b 7.81s +660.00ms ⚠️
dist/16.eb0e686d.js 1.18kb +0.00b 7.52s +649.00ms ⚠️
dist/divider.6cc8acb0.js 1.17kb +0.00b 7.74s +720.00ms ⚠️
dist/quote.b58dc9d4.js 1.16kb +0.00b 8.08s +597.00ms ⚠️
dist/component.f51f4183.js 1.15kb +0.00b 7.04s +1.48s ⚠️
dist/action.c1329039.js 1.15kb +0.00b 7.58s +699.00ms ⚠️
dist/decision.b8aab464.js 1.13kb +0.00b 7.74s +725.00ms ⚠️
dist/panel-warning.a4dc1737.js 1.13kb +0.00b 8.01s +694.00ms ⚠️
dist/list.6772c571.js 1.10kb +0.00b 7.89s +737.00ms ⚠️
dist/heading1.e7155c65.js 1.09kb +0.00b 8.13s +643.00ms ⚠️
dist/panel-error.2d0a3dc5.js 1.03kb +0.00b 7.97s +655.00ms ⚠️
dist/panel.983b8f36.js 1.02kb +0.00b 8.08s +766.00ms ⚠️
dist/table.613566d1.js 1.01kb +0.00b 8.13s +643.00ms ⚠️
dist/panel-success.f52c4b4f.js 990.00b +0.00b 8.01s +700.00ms ⚠️
dist/panel-note.af0bab14.js 986.00b +0.00b 8.01s +700.00ms ⚠️
dist/EmojiPickerComponent.57313a93.js 680.00b +0.00b 1.74m +46.20s ⚠️
dist/simpleHasher.948d1b20.js 673.00b +0.00b 1.75m +1.51m ⚠️
dist/index.html 119.00b +0.00b 8.38s +1.43s ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/index.30ddb139.js 2.74mb -1.25kb 🚀 467.00ms -86.00ms 🚀
dist/media-viewer.4c3f658c.js 71.88kb -271.00b 🚀 759.00ms -3.00ms
dist/Modal.f7e71087.js 41.31kb +0.00b 524.00ms -67.00ms 🚀
dist/component.327022bf.js 30.85kb +0.00b 468.00ms -85.00ms 🚀
dist/component.49a28949.js 22.36kb +0.00b 524.00ms -68.00ms 🚀
dist/dropzone.498ec003.js 17.30kb -251.00b 🚀 807.00ms +4.00ms
dist/smartMediaEditor.a8b77894.js 16.90kb -251.00b 🚀 807.00ms -25.00ms
dist/js.eb39c3cf.js 16.55kb +0.00b 524.00ms -67.00ms 🚀
dist/ui.cfe8a82a.js 13.94kb +0.00b 785.00ms +40.00ms ⚠️
dist/workerHasher.9dc1181e.js 11.90kb +0.00b 785.00ms +40.00ms ⚠️
dist/component.fe59914e.js 6.19kb +0.00b 524.00ms -70.00ms 🚀
dist/card.7b75c38c.js 5.67kb -34.00b 🚀 759.00ms -3.00ms
dist/png-chunks-extract.3bcd3532.js 3.55kb +0.00b 524.00ms -68.00ms 🚀
dist/Modal.725e4b5d.js 3.07kb +0.00b 684.00ms +117.00ms ⚠️
dist/16.984a552d.js 2.49kb +0.00b 488.00ms -176.00ms 🚀
dist/ResourcedEmojiComponent.4e7708b7.js 2.07kb +0.00b 468.00ms -85.00ms 🚀
dist/16.51a973ae.js 1.86kb +0.00b 604.00ms -51.00ms 🚀
dist/16.664f2364.js 1.79kb +0.00b 576.00ms -51.00ms 🚀
dist/16.d03ef2ed.js 1.51kb +0.00b 604.00ms -51.00ms 🚀
dist/16.2560b363.js 1.46kb +0.00b 576.00ms -51.00ms 🚀
dist/16.3d2fa847.js 1.46kb +0.00b 576.00ms -52.00ms 🚀
dist/16.a99d351e.js 1.44kb +0.00b 633.00ms -42.00ms 🚀
dist/16.c8c5e38d.js 1.40kb +0.00b 633.00ms -42.00ms 🚀
dist/16.039b21a1.js 1.36kb +0.00b 632.00ms -43.00ms 🚀
dist/16.8938ddc0.js 1.32kb +0.00b 633.00ms -42.00ms 🚀
dist/16.3d8988cf.js 1.27kb +0.00b 604.00ms -51.00ms 🚀
dist/16.b709596e.js 1.26kb +0.00b 576.00ms -51.00ms 🚀
dist/16.202504a1.js 1.26kb +0.00b 604.00ms -60.00ms 🚀
dist/16.5ba30215.js 1.26kb +0.00b 604.00ms -51.00ms 🚀
dist/16.2da93a26.js 1.26kb +0.00b 576.00ms -51.00ms 🚀
dist/16.eb0e686d.js 1.18kb +0.00b 633.00ms -42.00ms 🚀
dist/component.f51f4183.js 1.15kb +0.00b 468.00ms -85.00ms 🚀
dist/simpleHasher.948d1b20.js 673.00b +0.00b 785.00ms +40.00ms ⚠️
dist/index.html 119.00b +0.00b 321.00ms -81.00ms 🚀

Three.js x4 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Click here to view a detailed benchmark overview.

@DeMoorJasper
Copy link
Member

DeMoorJasper commented Jul 6, 2020

If this gets merged we do need to update the docs: https://v2.parceljs.org/getting-started/webapp/#browserslist

@mischnic
Copy link
Member

mischnic commented Jul 6, 2020

Babel compilation is turned off for node_modules

Will this some cause some problems with IE11 for @wbinnssmith ?

And maybe we should off on this until Babel can be configured to force transpilation of (some) node_modules (babelrc#includes?)

@leaumar
Copy link

leaumar commented Oct 9, 2020

You have defined a browserslist in your package.json

Can this and similar statements be expanded to include the non-package.json equivalents like the .browserslistrc file, if that's not already implicitly the case to people in this project? Those alternatives are an established concept already for configuration, so they should consistently remain first class citizens. I don't like polluting package.json with all kinds of arbitrary config if I have a choice.

@mischnic
Copy link
Member

mischnic commented Oct 9, 2020

Can this and similar statements be expanded to include the non-package.json equivalents like the .browserslistrc file, if that's not already implicitly the case to people in this project

This should definitely be the case, I'm not sure if this change actually respects that though

@devongovett
Copy link
Member Author

It should. It's the TargetResolver's responsibility to read browserslist configs, and the babel transformer just uses the pre-resolved targets so I don't think any changes should be needed for that.

Comment on lines -54 to -61
root: options.projectRoot,
babelrcRoots,
Copy link
Member

@mischnic mischnic Oct 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you remove these options?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe setting the cwd to the projectRoot makes babel able to find the root config itself rather than needing us to pass them in.

…ults

# Conflicts:
#	packages/core/core/test/TargetRequest.test.js
#	packages/core/integration-tests/test/babel.js
#	packages/transformers/babel/src/config.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants