为什么要在 Babel 和 ESLint 上使用 Vue CLI？

Question

I am just starting out with Node.js and Vue.js, and I noticed that Vue.js has a Vue CLI tooling kit (whatever that means) which gives you a scaffolding project (don't need it I think?) but it also adds ESLint and Babel.

The thing is, it adds them like this:

"plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
}

What is the difference between Vue's Babel @vue/cli-plugin-babel and installing Babel using NPM? Why do vue add cli-plugin-eslint instead of npm install eslint ?

Answer 1

Most important difference is that Vue CLI (and it's plugins) doesn't just add tools to your project but also provide configuration for the tools added (webpack/babel/eslint etc.) with sensible defaults (while still allowing you to fine-tune it)

So you can spend more time developing your app instead of figuring out how to setup dev/prod build tool chain...

Tools like Babel and ESLint are configured to work with Vue but it doesn't mean they work only for Vue specific features (for example Vue single file components). You can add pure JavaScript file into your project and Babel and ESLint will still work with it.

You can use some boilerplate or template for that but Vue CLI is better because it allows seamless updates to the tooling and configuration during whole project lifetime (instead of generating structure and config for you at the beginning and leave future updates to you).

For example lets say your project is using SASS in VUE single file components. You need a sass-loader Webpack plugin for that. Then sass-loader maintainers decide they need to change structure of their configuration (as happened recently ). If your project is based on the template of some kind, you can udpate to newer version of sass-loader but you'll also need to figure out what changes in configuration are needed to make it work again. If you are using Vue CLI (and CLI team decides to update to newest version of sass-loader ), you just update Vue CLI (or it's plugin) and you good to go (because someone on Vue CLI team figured out what needs to be changed and done it)

If you are just starting with Node/Vue, it's highly recommended to base your project on Vue CLI instead of trying to start from scratch....