为什么对 Babel 和 ESLint 使用 Vue CLI？

Question

我刚刚开始使用 Node.js 和 Vue.js，我注意到 Vue.js 有一个 Vue CLI 工具包（无论这意味着什么），它为您提供了一个脚手架项目（我认为不需要它？），但它还添加了 ESLint 和 Babel。

问题是，它像这样添加它们：

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

Vue 的 Babel 和使用 NPM 安装 Babel 有什么区别@vue/cli-plugin-babel？为什么要这样做vue add cli-plugin-eslint而不是npm install eslint？

Answer 1

最重要的区别是，Vue CLI（及其插件）不仅向您的项目添加工具，还为添加的工具（webpack/babel/eslint 等）提供合理的默认设置（同时仍然允许您微调）它）

因此，您可以花更多的时间来开发您的应用程序，而不是弄清楚如何设置开发/产品构建工具链......

Babel 和 ESLint 等工具被配置为与 Vue 一起使用，但这并不意味着它们仅适用于 Vue 特定功能（例如 Vue 单文件组件）。你可以将纯 JavaScript 文件添加到你的项目中，Babel 和 ESLint 仍然可以使用它。

您可以使用一些boilerplate模板或模板，但 Vue CLI 更好，因为它允许在整个项目生命周期内无缝更新工具和配置（而不是在开始时为您生成结构和配置，然后将未来的更新留给您）。

例如，假设您的项目在 VUE 单文件组件中使用 SASS。sass-loader为此，您需要一个Webpack 插件。然后sass-loader维护人员决定他们需要更改其配置的结构（就像最近发生的那样）。如果您的项目基于某种模板，您可以更新到较新的版本sass-loader，但您还需要弄清楚需要对配置进行哪些更改才能使其再次工作。如果您正在使用 Vue CLI（并且 CLI 团队决定更新到最新版本sass-loader），您只需更新 Vue CLI（或其插件）就可以了（因为 Vue CLI 团队中的某个人弄清楚了需要更改和完成哪些操作它）

如果您刚刚开始使用 Node/Vue，强烈建议您将项目基于 Vue CLI，而不是尝试从头开始......