调试时在 Vue-CLI 应用程序中禁用转译为 ES5答案

【问题标题】：Disable transpiling to ES5 in Vue-CLI app while debugging调试时在 Vue-CLI 应用程序中禁用转译为 ES5
【发布时间】：2021-06-15 09:39:32
【问题描述】：

我有一个开箱即用的 Vue CLI 应用程序，它使用 babel 转换为 ES5。有时这会导致调试时出现问题（因为我通过源映射查看的代码并不完全是正在运行的代码）。

如何禁用这种转换，至少在调试模式下？问题的一部分是因为这个刚刚建立起来，我并没有真正理解 webpack、babel 等链的所有步骤是什么，每次我尝试阅读它时似乎都非常复杂。

我的 package.json 的相关部分是：

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.5.21",
    "webpack-dev-server": "3.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

代码是here。

【问题讨论】：

您是否尝试过将您的babel.config.js 的targets 或您的package.json 的browserslist 更改为例如最新的 Chrome 版本？它不会停止转译，但至少会限制它。
是的，这部分有帮助，只要浏览器列表是最新的。不过，我想知道如何完全跳过 Babel。

标签： javascript webpack ecmascript-6 babeljs vue-cli

【解决方案1】：

您可以尝试添加

ignore: ["./src"]; // './src' is your desired directory

在您的 babel.config.js 文件中。

如果任何模式匹配，Babel 将立即停止当前构建的所有处理。

有效选项为Array<MatchPattern>，表示模式数组，了解更多信息here

通过官方doc了解更多关于ignore的信息

由于您只想在开发模式下忽略文件，因此您需要这样的东西：

ignore: [ process.env.NODE_ENV !== 'production' ? "./src" : "" ],

【讨论】：

完美，谢谢！（在 vue-cli fyi 上是 ./src）。
不确定目录或 js 文件位置哈哈。谢谢