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

Posted 2023-02-23

【中文标题】调试时在 Vue-CLI 应用程序中禁用转译为 ES5

【英文标题】：Disable transpiling to ES5 in Vue-CLI app while debugging

【发布时间】：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。

【参考方案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 文件位置哈哈。谢谢