Feature: Config Creation Wizard

[brigand]

I've been working on a project to create a config wizard for .babelrc. I'm hoping to go through some iterations based on feedback, and eventually get it included in the site as either a link or an embed.

Demo | Source

Example output:

{
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%"
          ]
        }
      }
    ],
    "react"
  ]
}

Any feedback is appreciated, either here or in config-wizard issues.

[hzoo]

Like perfect timing! Was thinking about this kind of thing for a while now, or even for GSoC. Looks awesome, and a good start to iterate on. cc @gaearon @TheLarkInn?

[TheLarkInn]

Oh this is exactly how I imagine our webpack-cli add-on system would function.

[xtuc]

It could include the compat-table. User could then search for JavaScript features they want.

Would also be cool to have this on Babel's website 👍

[brigand]

@xtuc I don't see how most of the compat table would be helpful, but we could expose the full configuration options of all of the babel presets and plugins. I'll give it a try. Thanks!

[hzoo]

It would be nice if we can coordinate with the cli version. @existentialism suggested the web version (which we would put in setup/homepage) could output some kind of hash/key that you could paste into the babel init cli and it would create the babelrc + install everything for you as well

[brigand]

@hzoo We could upload something to a gist and pass the id to the babel cli.

[brigand]

I've been reviewing the docs, and I'm not sure how much control we should provide in the advanced section. For example, we should allow enabling spec mode, but not allow changing the spec mode of the arrow-functions transform.

So far, I've come up with these options, but I'd like feedback before I implement it: loose mode, module type, spec, optimize react, strip flow, regenerator (not allowed by airbnb style guide), and runtime. Maybe also all of the experimental transforms.

---

Unrelated, but it might also be useful to generate core.js/regenerator configs based on the selections here. Example from their docs.

require('core-js/fn/set');
require('core-js/fn/array/from');
require('core-js/fn/array/find-index');

[hzoo]

We don't need to provide every possible option especially if it's for an init. It might be more interesting if you already have a babelrc and wanted to update.

I'd like to make the initial one as simple as possible with the minimal amount of work. and then coul ask for extras

[brigand]

Yeah, I was thinking of doing.

Question 1 [answer 1] [answer 2]

Question 2 [answer 1] [answer 2]

Here's your babel rc
{"...": "..."}
[show advanced]

Advanced
Modules: [common.js] [amd] ...
...

But we can consider adding that some time in the future and stick to the basics for now.

---

Should we do optimizing react apps in production by default? Any other changes I should make? I have time to work on this this week.

[hzoo]

I think it's good to iterate, no idea what we need and no way to really guess without trying it. It doesn't end at the release is what I think especially for this.

I'd just make it work (looks like it already does of course), and then make it easier to add while the core experience is simple and fast.

[brigand]

I'm going to create another page for polyfill generation, and link to it in the final step once it's done. That doesn't need to block this.

I think this is ready to add to the babel site. Do you want it as an embed or a link?