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

CLI (babel init) command to guide people through setting up Babel (T6956) #3977

Open
babel-bot opened this Issue Jan 13, 2016 · 25 comments

Comments

Projects
None yet
7 participants
@babel-bot
Collaborator

babel-bot commented Jan 13, 2016

Issue originally made by @thejameskyle

Description

Suggested on reddit

I think this would be a really awesome idea. We could interactively guide people through configuring Babel.

I really want to do this.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 13, 2016

Collaborator

Comment originally made by @threepointone

This would be great! Would also love to help. Would you also consider cli extensions ala git? So if I have an executable babel-install, then running babel install es2015 would call that instead. Similarly for babel-init/babel init, etc

Collaborator

babel-bot commented Jan 13, 2016

Comment originally made by @threepointone

This would be great! Would also love to help. Would you also consider cli extensions ala git? So if I have an executable babel-install, then running babel install es2015 would call that instead. Similarly for babel-init/babel init, etc

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 13, 2016

Collaborator

Comment originally made by @thejameskyle

It'd likely make more sense for it to be a separate executable babel-init than tack onto the existing babel CLI in terms of the codebase: https://github.com/babel/babel/tree/master/packages/babel-cli/bin

Collaborator

babel-bot commented Jan 13, 2016

Comment originally made by @thejameskyle

It'd likely make more sense for it to be a separate executable babel-init than tack onto the existing babel CLI in terms of the codebase: https://github.com/babel/babel/tree/master/packages/babel-cli/bin

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 15, 2016

Collaborator

Comment originally made by @daekano

This is a pretty good idea, could be as simple as asking the user to pick an option on a (short) list. I would recommend to make this a part of babel core, and not a separate package or executable. Could ask for user input when being installed, or read from a local committed configuration file.

$ babel config
  Select a babel configuration:
    (1) - ES2015
    (2) - ES2016
 Your selection: (1)_
$ babel config --preset es2015

I presume it would then download and enable the recommended preset packages.

Collaborator

babel-bot commented Jan 15, 2016

Comment originally made by @daekano

This is a pretty good idea, could be as simple as asking the user to pick an option on a (short) list. I would recommend to make this a part of babel core, and not a separate package or executable. Could ask for user input when being installed, or read from a local committed configuration file.

$ babel config
  Select a babel configuration:
    (1) - ES2015
    (2) - ES2016
 Your selection: (1)_
$ babel config --preset es2015

I presume it would then download and enable the recommended preset packages.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 15, 2016

Collaborator

Comment originally made by @joshmanders

I agree with daekano. Could be as simple as just a default set of presets, maybe babel official presets, or even go as far as to cache top presets on npm and display them, so the community can define the list without having to worry about keeping babel up-to-date with what everyone's using.

Collaborator

babel-bot commented Jan 15, 2016

Comment originally made by @joshmanders

I agree with daekano. Could be as simple as just a default set of presets, maybe babel official presets, or even go as far as to cache top presets on npm and display them, so the community can define the list without having to worry about keeping babel up-to-date with what everyone's using.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 15, 2016

Collaborator

Comment originally made by @thejameskyle

It can start off that way, but I want it to do even more than that. Things like:

  • Setting up babel-runtime (walk them through it)
  • Setting up specific plugins (it would be awesome if you could search for a specific feature)
  • It would be awesome if Babel integrations could extend it with instructions on how to setup them (ie. gulp-babel showing instructions)

Idk– I want to do a lot, and I think people would prefer a lot of this over documentation.

Collaborator

babel-bot commented Jan 15, 2016

Comment originally made by @thejameskyle

It can start off that way, but I want it to do even more than that. Things like:

  • Setting up babel-runtime (walk them through it)
  • Setting up specific plugins (it would be awesome if you could search for a specific feature)
  • It would be awesome if Babel integrations could extend it with instructions on how to setup them (ie. gulp-babel showing instructions)

Idk– I want to do a lot, and I think people would prefer a lot of this over documentation.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 16, 2016

Collaborator

Comment originally made by @joshmanders

I've put on my idea list two modules independent of official babel.

One is a drop in replacement for babel5 that uses babel6. You can npm install it just like before, and it just works using preset transformers based on the same ones that 5 had, and maybe a few extras.

The second is an interactive command line tool that you can run in a directory and it will start prompting you with easy to understand terminology for actually configuring and setting up Babel for that project such as "Do you want to use ES2015 Classes? y/N" if they say "Y" then it will npm install and save the transformers required for classes, and also add it to the .babelrc.

What do you think?

Collaborator

babel-bot commented Jan 16, 2016

Comment originally made by @joshmanders

I've put on my idea list two modules independent of official babel.

One is a drop in replacement for babel5 that uses babel6. You can npm install it just like before, and it just works using preset transformers based on the same ones that 5 had, and maybe a few extras.

The second is an interactive command line tool that you can run in a directory and it will start prompting you with easy to understand terminology for actually configuring and setting up Babel for that project such as "Do you want to use ES2015 Classes? y/N" if they say "Y" then it will npm install and save the transformers required for classes, and also add it to the .babelrc.

What do you think?

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Jan 16, 2016

Collaborator

Comment originally made by @hzoo

Dono if this should be a seperate issue but i'l just leave a comment here.

For people doing

npm install babel

right now they see (after running babel)

# ./node_modules/.bin/babel
The CLI has been moved into the package `babel-cli`. See http://babeljs.io/docs/usage/cli/

We could prompt to install the cli/run babel init as well after.

Collaborator

babel-bot commented Jan 16, 2016

Comment originally made by @hzoo

Dono if this should be a seperate issue but i'l just leave a comment here.

For people doing

npm install babel

right now they see (after running babel)

# ./node_modules/.bin/babel
The CLI has been moved into the package `babel-cli`. See http://babeljs.io/docs/usage/cli/

We could prompt to install the cli/run babel init as well after.

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Mar 1, 2016

Collaborator

Comment originally made by @SBoudrias

Just a comment that Yeoman is easily wrappable inside of other tool and could power the Babel scaffolding tools. It's totally whitelabelled so babel init would just work as is.

We have documentation over here http://yeoman.io/authoring/integrating-yeoman.html and our team would be happy to offer help and support creating this feature.

FWIW, the ESLint team offered a yeoman generator from the get go to help users create plugins https://www.npmjs.com/package/generator-eslint

Collaborator

babel-bot commented Mar 1, 2016

Comment originally made by @SBoudrias

Just a comment that Yeoman is easily wrappable inside of other tool and could power the Babel scaffolding tools. It's totally whitelabelled so babel init would just work as is.

We have documentation over here http://yeoman.io/authoring/integrating-yeoman.html and our team would be happy to offer help and support creating this feature.

FWIW, the ESLint team offered a yeoman generator from the get go to help users create plugins https://www.npmjs.com/package/generator-eslint

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Mar 28, 2016

Collaborator

Comment originally made by Tibor Szász (tiborsaas)

I'd suggest taking a look how Zurb Foundation sets up a new project. It's really simple, I don't have to think about much, just have a little "conversation" with the terminal. The reason it's great is that I don't have to read much just to try it out and after a small initial success I can go on configuring it to my taste.

Collaborator

babel-bot commented Mar 28, 2016

Comment originally made by Tibor Szász (tiborsaas)

I'd suggest taking a look how Zurb Foundation sets up a new project. It's really simple, I don't have to think about much, just have a little "conversation" with the terminal. The reason it's great is that I don't have to read much just to try it out and after a small initial success I can go on configuring it to my taste.

@17cupsofcoffee

This comment has been minimized.

Show comment
Hide comment
@17cupsofcoffee

17cupsofcoffee Dec 5, 2016

@thejameskyle and friends: has any work been done so far on this? I'd be interested in having a go at contributing if nobody has already picked it up/plans to do so, this feature seems like a really good idea 👍

17cupsofcoffee commented Dec 5, 2016

@thejameskyle and friends: has any work been done so far on this? I'd be interested in having a go at contributing if nobody has already picked it up/plans to do so, this feature seems like a really good idea 👍

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Dec 5, 2016

Member

No code yet since we need to figure out more about what it's going to do and the questions to ask etc.

If you'd like to contribute I think we might want to discuss that first! Thanks for offering!

Some new thoughts since it's been a while

Member

hzoo commented Dec 5, 2016

No code yet since we need to figure out more about what it's going to do and the questions to ask etc.

If you'd like to contribute I think we might want to discuss that first! Thanks for offering!

Some new thoughts since it's been a while

@17cupsofcoffee

This comment has been minimized.

Show comment
Hide comment
@17cupsofcoffee

17cupsofcoffee Dec 5, 2016

Ah, I hadn't seen that preset before, that's really cool! I'd personally lean towards going feature-by-feature rather than using the stage presets, if only by virtue of the fact I always have to Google what stage things are at...

And yeah, obviously I don't want to step on anyone's toes - if this ends up being better suited to being worked on by a more experienced contributor, it's no problem! 😄

17cupsofcoffee commented Dec 5, 2016

Ah, I hadn't seen that preset before, that's really cool! I'd personally lean towards going feature-by-feature rather than using the stage presets, if only by virtue of the fact I always have to Google what stage things are at...

And yeah, obviously I don't want to step on anyone's toes - if this ends up being better suited to being worked on by a more experienced contributor, it's no problem! 😄

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Dec 5, 2016

Member

I think the implementation part shouldn't be that bad and you can totally champion it if you want (i'm not focused on this at this very moment) @17cupsofcoffee. It's different a high priority since it's annoying to have to configure.

I was thinking of using https://github.com/SBoudrias/Inquirer.js/ or something like that (it asks questions and you can use the answers to create a config)

Member

hzoo commented Dec 5, 2016

I think the implementation part shouldn't be that bad and you can totally champion it if you want (i'm not focused on this at this very moment) @17cupsofcoffee. It's different a high priority since it's annoying to have to configure.

I was thinking of using https://github.com/SBoudrias/Inquirer.js/ or something like that (it asks questions and you can use the answers to create a config)

@17cupsofcoffee

This comment has been minimized.

Show comment
Hide comment
@17cupsofcoffee

17cupsofcoffee Dec 5, 2016

I think Inquirer.js is definitely the best option for that sort of thing (at least of the libraries I've used in the past). Looking back at the previous replies to this thread, @SBoudrias suggested embedding Yeoman (which IIRC uses Inquirer by default for the terminal interface) as a possible solution - could be a decent way to avoid re-inventing the wheel, since it's got functionality for installing dependencies and creating files from templates, etc.

17cupsofcoffee commented Dec 5, 2016

I think Inquirer.js is definitely the best option for that sort of thing (at least of the libraries I've used in the past). Looking back at the previous replies to this thread, @SBoudrias suggested embedding Yeoman (which IIRC uses Inquirer by default for the terminal interface) as a possible solution - could be a decent way to avoid re-inventing the wheel, since it's got functionality for installing dependencies and creating files from templates, etc.

@SBoudrias

This comment has been minimized.

Show comment
Hide comment
@SBoudrias

SBoudrias Dec 5, 2016

@17cupsofcoffee I'm happy to help you out if you have any issues embedding Yeoman. Just ping me, I'm usually around our gitter channel https://gitter.im/yeoman/yeoman

SBoudrias commented Dec 5, 2016

@17cupsofcoffee I'm happy to help you out if you have any issues embedding Yeoman. Just ping me, I'm usually around our gitter channel https://gitter.im/yeoman/yeoman

@17cupsofcoffee

This comment has been minimized.

Show comment
Hide comment
@17cupsofcoffee

17cupsofcoffee Dec 6, 2016

Couple of quick thoughts off the top of my head while I'm on lunch break:

  • I think the language when choosing a preset is going to be very important - I feel like if I were a beginner, and I were given the option between babel-preset-env and babel-preset-es2015 with no context, I'd choose the latter because it seems more obvious what it does. Perhaps it would be more helpful to frame it around the functionality, something along the lines of:
? Which features do you want to compile?
> All ES2015+ features (would correspond to babel-preset-env with no targets)
  All ES2015+ features my target environment doesn't natively support (would correspond to babel-preset-env with targets, more questions displayed on which they want)
  Choose a preset (offers a list of presets to choose from)
  • Might be better for me to ask this in Slack or something, but is there an easy way to programmatically get the list of experimental plugins? The most obvious way I could come up with was to grab them from the stage preset packages, but if they might be going the way of the dodo some time soon it might be better not to rely on them.

Also, thanks for the offer, @SBoudrias 😄 From what little I've played around with so far, it seems pretty intuitive, but I'll definitely drop in if I get stuck!

17cupsofcoffee commented Dec 6, 2016

Couple of quick thoughts off the top of my head while I'm on lunch break:

  • I think the language when choosing a preset is going to be very important - I feel like if I were a beginner, and I were given the option between babel-preset-env and babel-preset-es2015 with no context, I'd choose the latter because it seems more obvious what it does. Perhaps it would be more helpful to frame it around the functionality, something along the lines of:
? Which features do you want to compile?
> All ES2015+ features (would correspond to babel-preset-env with no targets)
  All ES2015+ features my target environment doesn't natively support (would correspond to babel-preset-env with targets, more questions displayed on which they want)
  Choose a preset (offers a list of presets to choose from)
  • Might be better for me to ask this in Slack or something, but is there an easy way to programmatically get the list of experimental plugins? The most obvious way I could come up with was to grab them from the stage preset packages, but if they might be going the way of the dodo some time soon it might be better not to rely on them.

Also, thanks for the offer, @SBoudrias 😄 From what little I've played around with so far, it seems pretty intuitive, but I'll definitely drop in if I get stuck!

@hzoo hzoo self-assigned this Mar 16, 2017

@wcastand

This comment has been minimized.

Show comment
Hide comment
@wcastand

wcastand Aug 24, 2017

Contributor

i just published a alpha version for init-babel.
github
npm
it obviously need some feedback and help (translation, presets, options, ...)

It's really simple, so we can iterate quickly on it. It uses yeoman.

give a quick check if you have time and maybe help make it better :)

Contributor

wcastand commented Aug 24, 2017

i just published a alpha version for init-babel.
github
npm
it obviously need some feedback and help (translation, presets, options, ...)

It's really simple, so we can iterate quickly on it. It uses yeoman.

give a quick check if you have time and maybe help make it better :)

@caraya

This comment has been minimized.

Show comment
Hide comment
@caraya

caraya Aug 30, 2017

is babel-init a best practices demonstration of installing and configuring Babel or is it a Yeoman-style plugin?

Some of the questions that come up with seeing the structure of the project and the conversation here.

  • Are you encouraging people to use preset-env to minimize compilation or the full suite of ES2015, ES2016 and ES2017 presets and compile everything regardless of what the browser supports?
  • How will this work with other tools that do initialization, will they conflict or are you planning for this to be a standalone init project that you build on top of?

I'd be happy to help out.

caraya commented Aug 30, 2017

is babel-init a best practices demonstration of installing and configuring Babel or is it a Yeoman-style plugin?

Some of the questions that come up with seeing the structure of the project and the conversation here.

  • Are you encouraging people to use preset-env to minimize compilation or the full suite of ES2015, ES2016 and ES2017 presets and compile everything regardless of what the browser supports?
  • How will this work with other tools that do initialization, will they conflict or are you planning for this to be a standalone init project that you build on top of?

I'd be happy to help out.

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Aug 30, 2017

Member

@caraya, both? can check @wcastand's example above.

For the first question, preset-env because it encompasses the rest anyway (no options = compile everything), no reason to keep suggesting anything else really
2nd - dono, could be either 😄

maybe we want to think about the different use cases in order to answer that - like if you are using babel with webpack (babel-loader), and that it has it's own cli, or with create-react-app (it already has a custom config), or you are doing testing in the repl, or a node app (babel-node/babel-register), or a library. For node we could just make a separate package that has no config but compiles preset-env against process.version of node. (node: "current" option)

Member

hzoo commented Aug 30, 2017

@caraya, both? can check @wcastand's example above.

For the first question, preset-env because it encompasses the rest anyway (no options = compile everything), no reason to keep suggesting anything else really
2nd - dono, could be either 😄

maybe we want to think about the different use cases in order to answer that - like if you are using babel with webpack (babel-loader), and that it has it's own cli, or with create-react-app (it already has a custom config), or you are doing testing in the repl, or a node app (babel-node/babel-register), or a library. For node we could just make a separate package that has no config but compiles preset-env against process.version of node. (node: "current" option)

@wcastand

This comment has been minimized.

Show comment
Hide comment
@wcastand

wcastand Aug 30, 2017

Contributor

Hi @caraya, i think hzoo responded to your first question. For the second, when i was building the package linked above, i noticed that if you have a .babelrc, yeoman by default ask you what you want to do (replace, keep it, ...) but they are some problems if your folder is not empty.

I'd like to make the cli work in both cases. Start a project and help someone configure for his needs but also maintaining a project already configured. The second point could also be applied to stuff like create-react-app to help you customize it.

When you talk about other tool, do you have any tool in mind ?

Contributor

wcastand commented Aug 30, 2017

Hi @caraya, i think hzoo responded to your first question. For the second, when i was building the package linked above, i noticed that if you have a .babelrc, yeoman by default ask you what you want to do (replace, keep it, ...) but they are some problems if your folder is not empty.

I'd like to make the cli work in both cases. Start a project and help someone configure for his needs but also maintaining a project already configured. The second point could also be applied to stuff like create-react-app to help you customize it.

When you talk about other tool, do you have any tool in mind ?

@caraya

This comment has been minimized.

Show comment
Hide comment
@caraya

caraya Aug 31, 2017

Everyone seems to have a CLI nowadays. Some that I was thinking about when I posted the question are:

  • Firebase Tools
  • Polymer CLI
  • Ember CLI

I'm pretty sure there are others.

@wcastand I like the idea and would suggest creating branching paths based on different tooling or a configuration file that can be used in conjunction with preset-env and as part of the documentation.

One solution to the issue you mention is being completely hands-off. If the directory is not empty I think it's always better to err on the side of the user knowing what they are doing and only adding the babel init code if there is nothing there. This way we avoid giving new users a footgun

caraya commented Aug 31, 2017

Everyone seems to have a CLI nowadays. Some that I was thinking about when I posted the question are:

  • Firebase Tools
  • Polymer CLI
  • Ember CLI

I'm pretty sure there are others.

@wcastand I like the idea and would suggest creating branching paths based on different tooling or a configuration file that can be used in conjunction with preset-env and as part of the documentation.

One solution to the issue you mention is being completely hands-off. If the directory is not empty I think it's always better to err on the side of the user knowing what they are doing and only adding the babel init code if there is nothing there. This way we avoid giving new users a footgun

@wcastand

This comment has been minimized.

Show comment
Hide comment
@wcastand

wcastand Oct 2, 2017

Contributor

I didn't get a lot of feedback on the package i created, so i don't know what it means exactly and don't know where to go from there :/

Contributor

wcastand commented Oct 2, 2017

I didn't get a lot of feedback on the package i created, so i don't know what it means exactly and don't know where to go from there :/

@zephraph

This comment has been minimized.

Show comment
Hide comment
@zephraph

zephraph Oct 2, 2017

I'm interested in helping out. @wcastand I'll give you some feedback in a few hours (after work).

zephraph commented Oct 2, 2017

I'm interested in helping out. @wcastand I'll give you some feedback in a few hours (after work).

@zephraph

This comment has been minimized.

Show comment
Hide comment
@zephraph

zephraph Oct 2, 2017

So I think this needs to be absolutely beginner friendly. Also, I personally wouldn't mention the names of presets unless its dynamic.

I'd change the flow a little bit too.

  1. What environment are you using? (node/browser)
  2. What browsers do you need to support?
  3. Include polyfills? (Maybe do something w/ builtins here too)
  4. Do you want experimental features (stages and short descriptions)
  5. Support jsx?
  6. Support flow?

I'm not sure how tool specific I would get though. Lots of tools, frameworks have their own cli which automatically supports babel.

zephraph commented Oct 2, 2017

So I think this needs to be absolutely beginner friendly. Also, I personally wouldn't mention the names of presets unless its dynamic.

I'd change the flow a little bit too.

  1. What environment are you using? (node/browser)
  2. What browsers do you need to support?
  3. Include polyfills? (Maybe do something w/ builtins here too)
  4. Do you want experimental features (stages and short descriptions)
  5. Support jsx?
  6. Support flow?

I'm not sure how tool specific I would get though. Lots of tools, frameworks have their own cli which automatically supports babel.

@wcastand

This comment has been minimized.

Show comment
Hide comment
@wcastand

wcastand Oct 3, 2017

Contributor

Like you said, lot of frameworks, libs, have their own solutions and cli to automatically configure babel. So the more i think about it, the more i think we should focus on maintaining a project, or removing/adding features to an existing babel config.

For example, you're init your project with create-react-app, after a while you want the do expression in your app so you use babel-init to add this transform to your babel config and you don't need to look for the name of the transform package, not add it to your .babelrc because the cli do it for you by listing the list of transforms or with some clever question, know which transforms, plugins you need.

Init a project with babel happens less and less since most cli, framework tends to go for opt-in config. We can maybe create some 'template' starters for quick project init without any frameworks, libs, ....

But i think there is . nothing really beginner friendly in a cli that asks 10 questions before you can start doing some code with babel transpile. 10 questions which you probably let the default because you're not familiar with babel to use this cli anyway :P .

Contributor

wcastand commented Oct 3, 2017

Like you said, lot of frameworks, libs, have their own solutions and cli to automatically configure babel. So the more i think about it, the more i think we should focus on maintaining a project, or removing/adding features to an existing babel config.

For example, you're init your project with create-react-app, after a while you want the do expression in your app so you use babel-init to add this transform to your babel config and you don't need to look for the name of the transform package, not add it to your .babelrc because the cli do it for you by listing the list of transforms or with some clever question, know which transforms, plugins you need.

Init a project with babel happens less and less since most cli, framework tends to go for opt-in config. We can maybe create some 'template' starters for quick project init without any frameworks, libs, ....

But i think there is . nothing really beginner friendly in a cli that asks 10 questions before you can start doing some code with babel transpile. 10 questions which you probably let the default because you're not familiar with babel to use this cli anyway :P .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment