【Vue】Parsing error: No Babel config file detected for ... vue

這篇具有很好參考價(jià)值的文章主要介紹了【Vue】Parsing error: No Babel config file detected for ... vue。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

報(bào)錯(cuò)

Parsing error: No Babel config file detected for E:\Study\Vue網(wǎng)站\實(shí)現(xiàn)防篡改的水印\demo02\src\App.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. ??????????????eslint

背景

開發(fā)環(huán)境：Windows
開發(fā)IDE：Visual Studio Code 版本1.76.0
開發(fā)項(xiàng)目：Vue3 - v3.2.13
項(xiàng)目文件夾：E:\Study\Vue網(wǎng)站\實(shí)現(xiàn)防篡改的水印\demo02
VSCode 插件：ESLint v2.4.2
VSCode 打開文件夾：E:\Study\Vue網(wǎng)站\實(shí)現(xiàn)防篡改的水印
報(bào)錯(cuò)代碼：

解決方案

方案一、卸載插件

此方法簡單粗暴，插件提出問題，解決掉插件也就不會(huì)提出問題

方案二、重新打開文件夾

確保項(xiàng)目文件夾與VSCode 打開文件夾是同一個(gè)文件夾。

原因

在package.json的配置文件中，配置eslintConfig\parserOptions\parser的解析器是@babel/eslint-parser

{
  "name": "demo01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

根據(jù)Babel官方手冊(cè)，Babel 默認(rèn)從根目錄下查找babel.config.js配置，如果打開的文件夾所在的第一級(jí)目錄沒有babel.config.js配置就會(huì)報(bào)此錯(cuò)。

BABEL 配置文件

以下內(nèi)容從BABEL 配置文件處

配置文件類型

Babel 有兩種并行的配置文件方式，可以一起使用，也可以單獨(dú)使用。

?歷史

項(xiàng)目范圍的配置
- babel.config.* 文件，可用如下不同擴(kuò)展名： .json, .js, .cjs, .mjs。
相對(duì)文件的配置
- .babelrc.* 文件，可用如下不同擴(kuò)展名： .json, .js, .cjs, .mjs。
- 不帶擴(kuò)展名的 .babelrc。`
- 帶有 "babel"`` 屬性的 package.json` 文件。

項(xiàng)目范圍的配置

在 Babel 7.x 新版本中，Babel 有一個(gè) "root" 目錄的概念，默認(rèn)為當(dāng)前的工作目錄文件夾。對(duì)于項(xiàng)目范圍的配置，Babel 將在根目錄中自動(dòng)搜索 "babel.config.json" 文件，或使用了支持的擴(kuò)展名的等效文件。另外，用戶可以使用顯式的 "configFile" 值覆蓋默認(rèn)的配置文件搜索行為。

因?yàn)轫?xiàng)目范圍的配置文件與配置文件的物理位置是分離的，所以它們非常適合必須廣泛應(yīng)用的配置，甚至允許插件和預(yù)設(shè)輕松地應(yīng)用于 node_modules 或符號(hào)鏈接包中的文件，這在 Babel 6.x 中通常是很難配置的。

項(xiàng)目范圍配置的主要缺點(diǎn)是，因?yàn)樗蕾囉诠ぷ髂夸洠?如果工作目錄不是單體式倉庫的根目錄，那么在單體式倉庫中使用它會(huì)更加痛苦。有關(guān)如何在這種上下文中使用配置文件的示例，請(qǐng)參閱單體式倉庫文檔。

也可以通過將 "configFile" 設(shè)置為 false 來禁用項(xiàng)目范圍的配置。

相對(duì)文件的配置

Babel 從正在編譯（受以下警告限制）的 "filename" 開始搜索目錄結(jié)構(gòu)來加載 .babelrc.json 文件，或使用了支持的擴(kuò)展名的等效文件。這種功能非常強(qiáng)大，因?yàn)樗试S你為子 package 創(chuàng)建獨(dú)立的配置。相對(duì)文件的配置可以設(shè)置 merged 使它們特定的配置覆蓋項(xiàng)目范圍的配置值，盡管這也可以通過 "overrides" 來實(shí)現(xiàn)。

當(dāng)使用相對(duì)文件的配置時(shí)，需要考慮一些邊緣情況:

一旦找到包含 package.json 的目錄，搜索就會(huì)停止，因此相對(duì)文件的配置僅適用于單個(gè)包。
正在編譯的 "filename" 必須在 "babelrcRoots" packages 中，否則搜索將被完全跳過。
.babelrc.json 文件僅應(yīng)用于它們自己包中的文件
.babelrc.json 文件將被忽略如果不在 Babel 的 “根” 包中，除非你選擇使用 "babelrcRoots"
有關(guān)如何配置具有多個(gè)包的單體式倉庫的更多討論，請(qǐng)參閱單體式倉庫文檔。還可以通過將 "babelrc" 設(shè)置為 false` 來禁用相對(duì)文件的配置。

`6.x vs 7.x` `.babelrc` 加載

來自 Babel 6.x 的用戶可能會(huì)遇到這兩個(gè)邊緣情況，這是 Babel 7.x 中的新功能。這兩項(xiàng)限制是為了解決 Babel 6.x 中常見的 footguns 而增加的：

.babelrc 文件經(jīng)常出乎意料地應(yīng)用于 node_modules 依賴項(xiàng)。
.babelrc 文件無法應(yīng)用于符號(hào)鏈接 node_modules，當(dāng)人們期望它們表現(xiàn)得像正常的依賴時(shí)。
.babelrc 文件在 node_modules 依賴關(guān)系中將被檢測，即使它們內(nèi)部的插件和預(yù)設(shè)通常沒有安裝，甚至可能在編譯該文件的 Babel 版本中無效。
這些情況主要會(huì)給使用單體式倉庫結(jié)構(gòu)的用戶造成問題，如果你有

.babelrc
packages/
  mod1/
    package.json
    src/index.js
  mod2/
    package.json
    src/index.js

該配置現(xiàn)在將被完全忽略，因?yàn)樗缭搅税吔纭?/p>

一種替代方法是在每個(gè)子包中創(chuàng)建一個(gè) .babelrc，將 "extends" 用作

{ "extends": "../../.babelrc" }

不幸的是，這種方法可能有點(diǎn)重復(fù)，根據(jù) Babel 的使用方式，可能需要設(shè)置 "babelrcRoots"。

考慮到這一點(diǎn)，將 .babelrc 重命名為項(xiàng)目范圍的 "babel.config.json"可能更可取。正如上面在項(xiàng)目范圍部分提到的，這可能需要顯式設(shè)置 "configFile"，因?yàn)槿绻ぷ髂夸洸徽_，Babel 將找不到配置文件。

支持的文件擴(kuò)展名

可以使用 Node.js 本地支持的任何文件擴(kuò)展名配置 Babel，正如上面配置文件類型章節(jié)提到的一樣：

babel.config.json 和 .babelrc.json 被解析為 JSON5，并且應(yīng)該包含一個(gè) Babel 接受的選項(xiàng)格式匹配的對(duì)象。它們從 v7.7.0 開始支持。

我們建議盡可能使用這種文件類型：如果你的復(fù)雜配置有條件表達(dá)式或是在構(gòu)建時(shí)計(jì)算的，JS 配置文件則非常方便。然而，缺點(diǎn)是 JS 配置的靜態(tài)可分析性較差，因此對(duì)可緩存性、代碼檢測、IDE 自動(dòng)完成等有負(fù)面影響。由于 babel.config.json 和 .babelrc.json 是靜態(tài) JSON 文件，因此它允許其他使用 Babel 的工具，如綁定器，安全地緩存 Babel 的結(jié)果，這可能會(huì)帶來巨大的構(gòu)建性能優(yōu)勢。

babel.config.cjs 和 .babelrc.cjs 允許你使用 module.exports 將配置定義為 CommonJS。它們從 v7.7.0 開始支持。

babel.config.mjs 和 .babelrc.mjs 使用原生 ECMAScript 模塊。它們?cè)?Node.js 13.2+（或使用 --experimental-modules 標(biāo)志的更早版本）被支持。請(qǐng)記住，原生 ECMAScript 模塊是異步的（這就是 import() 總是返回 promise 的原因?。?因此，同步調(diào)用 Babel 時(shí)將拋出 .mjs 配置文件。它們從 v7.8.0 開始支持。

當(dāng)你的 package.json 文件包含 "type": "module" 選項(xiàng)時(shí)， babel.config.js 和 .babelrc.js 的行為類似 .mjs，否則它們與 .cjs 文件完全相同。

JavaScript 配置文件可以導(dǎo)出一個(gè)對(duì)象，也可以導(dǎo)出一個(gè)函數(shù)，當(dāng)調(diào)用該函數(shù)時(shí)，該函數(shù)將返回生成的配置。函數(shù)返回配置被賦予一些特殊功能，因?yàn)樗鼈兛梢栽L問由 Babel 本身公開的 API。有關(guān)更多信息，請(qǐng)參閱配置函數(shù) API。

出于兼容性原因，.babelrc 是 .babelrc.json 的別名。

單體式倉庫

單體式結(jié)構(gòu)的倉庫通常包含許多包，這意味著它們通常會(huì)遇到相對(duì)文件的配置和配置文件加載中提到的警告。本節(jié)旨在幫助用戶了解如何實(shí)現(xiàn)單體式倉庫配置。

對(duì)于單體式倉庫設(shè)置，需要理解的核心是 Babel 將你的工作目錄作為其邏輯 "root"，如果你想要在特定的子包中運(yùn)行 Babel 工具，而不希望 Babel 作為一個(gè)整體應(yīng)用于倉庫，則會(huì)出現(xiàn)問題。

另外，確定是要使用 .babelrc.json 文件還是只使用中央的 babel.config.json 文件也很重要。與 Babel 6 一樣，子文件夾特定的配置不需要 .babelrc.json 文件，因此在 Babel 7 中通常不需要這些文件，而是使用 babel.config.json。

根 `babel.config.json` 文件

任何單體式倉庫結(jié)構(gòu)的第一步都應(yīng)該是在存儲(chǔ)庫根目錄中創(chuàng)建一個(gè) babel.config.json 文件。這確立了 Babel 的核心概念，即倉庫的基準(zhǔn)目錄。即使你想用 .babelrc.json 文件來單獨(dú)配置每個(gè)包，將其作為倉庫級(jí)別選項(xiàng)的位置也很重要。

你通?？梢詫⑺袀}庫配置放在根 babel.config.json 中。使用 "overrides"，你可以輕松定僅適用于倉庫的特定子文件夾的配置，這通常比在倉庫中創(chuàng)建許多 .babelrc.json 文件更容易遵循。

您可能會(huì)遇到的第一個(gè)問題是，默認(rèn)情況下， Babel 希望從 "root" 設(shè)置的目錄加載 babel.config.json 文件，這意味著如果你創(chuàng)建了一個(gè) babel.config.json, 卻在單個(gè)包中運(yùn)行 Babel，例如：

cd packages/some-package;
babel src -d dist

在該上下文中 Babel 使用的 "root" 不是你倉庫的根目錄，它將無法找到 babel.config.json 文件。

如果你所有的構(gòu)建腳本都是相對(duì)于你的倉庫根目錄運(yùn)行的，那么應(yīng)該已經(jīng)可以工作了，但是如果你是在子包中運(yùn)行 Babel 編譯過程，那么你需要告訴 Babel 在哪里查找配置。有幾種方法可以做到這一點(diǎn)，但是推薦的方法是將 "rootMode" 選項(xiàng)設(shè)置為 "upward"，這將使 Babel 從工作目錄向上搜索 babel.config.json 文件，并使用其位置作為 "root" 的值。

測試你的配置是否被檢測到的一個(gè)有用方法是，如果配置是一個(gè) babel.config.json JavaScript 文件，則在其中放置 console.log() 調(diào)用：日志將在 Babel 第一次加載時(shí)執(zhí)行。

設(shè)置這個(gè)值的方式因項(xiàng)目而異，但是這里有一些例子：

CLI

babel --root-mode upward src -d lib

@babel/register

require("@babel/register")({
  rootMode: "upward",
});

Webpack

module: {
  rules: [
    {
      loader: "babel-loader",
      options: {
        rootMode: "upward",
      },
    },
  ];
}

Jest

Jest 通常安裝在單體式倉庫的根目錄，可能不需要配置，但是如果它在每個(gè)包中都安裝，配置起來可能會(huì)更加復(fù)雜。

主要部分是創(chuàng)建一個(gè)自定義 jest transformer 文件，該文件包裝 babel-jest 的默認(rèn)行為，以便設(shè)置選項(xiàng)，例如：

module.exports = require("babel-jest").default.createTransformer({
  rootMode: "upward",
});

將其保存在某個(gè)位置后，你可以在 Jest 選項(xiàng)中的 transform 選項(xiàng) 中使用處于 babel-jest 位置的這個(gè)文件：

"transform": {
  "^.+\\.jsx?$": "./path/to/wrapper.js"
},

因此所有的 JS 文件都將使用你指定的已啟用該選項(xiàng)的 babel-jest 版本進(jìn)行處理。

其他

注意：當(dāng)使用 babel-jest 等版本時(shí)，你必須刪除 .default 部分：require("babel-jest").createTransformer({ ...。

有很多工具，但最核心的是，如果工作目錄還不是單體式倉庫的根目錄，它們需要啟用 rootMode 選項(xiàng)。

子包的 .babelrc.json 文件

類似于 babel.config.json 文件必須位于 "root" 中的方式， .babelrc.json文件必須位于根目錄的 package 下。這意味著，工作目錄既會(huì)受載入的babel.config.json影響，也會(huì)受載入的.babelrc.json影響。

假設(shè)你已經(jīng)像上面討論的那樣正確地加載了 babel.config.json 文件，Babel 將只處理根包（而不是子包）中的 .babelrc.json 文件，例如

package.json
babel.config.js
packages/
  mod/
    package.json
    .babelrc.json
    index.js

編譯 packages/mod/index.js 文件將不會(huì)加載 packages/mod/.babelrc.json 因?yàn)?.babelrc.json 位于子包，而不是根包中。

要啟用對(duì)該 .babelrc.json 的處理，你需要在 babel.config.json 文件中使用 "babelrcRoots" 選項(xiàng)來執(zhí)行以下操作

babelrcRoots: [
  ".",
  "packages/*",
],

因此 Babel 將認(rèn)為所有匹配 packages/* 的包與原來的倉庫根目錄一起，都被允許加載 .babelrc.json 文件。

配置函數(shù) API

JS 配置文件可以導(dǎo)出一個(gè)將傳遞配置函數(shù) API 的函數(shù)：

module.exports = function(api) {
  return {};
};

api 對(duì)象與配置文件特定的 API 一起暴露了 Babel 本身暴露于其索引模塊的所有內(nèi)容：

api.version

類型：string

正在加載配置文件的 Babel 版本的版本字符串。

api.cache

JS 配置很棒，因?yàn)樗麄兛梢詣?dòng)態(tài)計(jì)算配置，但缺點(diǎn)是它使緩存變得更加困難。Babel 希望避免每次編譯文件時(shí)都重新執(zhí)行配置函數(shù)，因?yàn)檫@樣還需要重新執(zhí)行該配置中引用的所有插件和預(yù)設(shè)函數(shù)。

為了避免這種情況，Babel 希望用戶在配置函數(shù)時(shí)告訴它如何管理配置文件中的緩存。

api.cache.forever() - Permacache 計(jì)算的配置，永遠(yuǎn)不再調(diào)用該函數(shù)。
api.cache.never() - 不要緩存此配置，并且每次都重新執(zhí)行該功能。
api.cache.using(() => process.env.NODE_ENV) - 根據(jù) NODE_ENV 的值緩存。每次 using 回調(diào)返回的值都不是預(yù)期的值，總體而言將再次調(diào)用 config 函數(shù)，并將新條目添加到緩存中。
api.cache.invalidate(() => process.env.NODE_ENV) - 根據(jù) NODE_ENV 的值緩存。每次 using 回調(diào)返回的值都不是預(yù)期的值，總體而言將再次調(diào)用 config 函數(shù)，緩存中的所有條目將替換為結(jié)果。
api.cache(true) - 與 api.cache.forever() 相同
api.cache(false) - 與 api.cache.never() 相同
由于實(shí)際的回調(diào)結(jié)果用于檢查緩存條目是否有效，因此建議使用那：
回調(diào)應(yīng)該小而且沒有副作用。
回調(diào)應(yīng)該返回可能的最小范圍的值。例如 .using(() => process.env.NODE_ENV)上面的用法并不理想，因?yàn)樗鼤?huì)造成一個(gè)未知的高速緩存條目的數(shù)量取決于檢測到多少個(gè) NODE_ENV 值。 .using(() => process.env.NODE_ENV === "development") 更安全，因?yàn)榫彺鏃l目只能是 true 或 false。

api.env(…)

由于 NODE_ENV 是一種相當(dāng)常見的切換行為方式，因此 Babel 還包含一個(gè) API 函數(shù) 專門為此而設(shè)。此 API 用作檢查的快速方法加載了 Babel 的 "envName"，將 NODE_ENV 考慮在內(nèi) 如果沒有設(shè)置其他覆蓋環(huán)境。

它有幾種不同的形式：

api.env(“production”) 返回 true 如果 envName === “production”.
api.env(["development", "test"]) 返回 true 如果 ["development", "test"].includes(envName).
api.env() 返回當(dāng)前的 envName 字符串。
api.env(envName => envName.startsWith("test-")) 如果 env 以 "test-" 開頭，則返回 true。

注意: 這個(gè)函數(shù)在內(nèi)部使用上面提到的 api.cache 來確保 Babel 知道這個(gè)構(gòu)建依賴于特定的 envName。您不應(yīng)該將它和 api.cache.forever() 或者 api.cache.never() 一起使用。

api.caller(cb)

此 API 用作訪問已傳遞給 Babel 的 caller 數(shù)據(jù)的方法。由于 Babel 的許多實(shí)例可能在不同的 caller 的同一進(jìn)程中運(yùn)行值，這個(gè) API 旨在自動(dòng)配置 api.cache，就像 api.env() 一樣。

caller 值可用作回調(diào)函數(shù)的第一個(gè)參數(shù)。最好用有類似的東西

function isBabelRegister(caller) {
  return !!(caller && caller.name === "@babel/register");
}

module.exports = function(api) {
  const isRegister = api.caller(isBabelRegister);

  return {
    // ...
  };
};

根據(jù)特定環(huán)境切換配置行為。

api.assertVersion(range)

雖然 api.version 在一般情況下很有用，但有時(shí)候聲明你的版本會(huì)很好。此 API 公開了一種簡單的方法：文章來源地址http://www.zghlxwxcb.cn/news/detail-633682.html

module.exports = function(api) {
  api.assertVersion("^7.2");

  return {
    // ...
  };
};

到了這里，關(guān)于【Vue】Parsing error: No Babel config file detected for ... vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

【Vue】Parsing error: No Babel config file detected for ... vue

報(bào)錯(cuò)

背景

解決方案

方案一、卸載插件

方案二、重新打開文件夾

原因

BABEL 配置文件

配置文件類型

項(xiàng)目范圍的配置

相對(duì)文件的配置

`6.x vs 7.x` `.babelrc` 加載

支持的文件擴(kuò)展名

單體式倉庫

根 `babel.config.json` 文件

CLI

@babel/register

Webpack

Jest

子包的 .babelrc.json 文件

配置函數(shù) API

api.version

api.cache

api.env(…)

api.caller(cb)

api.assertVersion(range)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

【Vue】Parsing error: No Babel config file detected for ... vue

報(bào)錯(cuò)

背景

解決方案

方案一、卸載插件

方案二、重新打開文件夾

原因

BABEL 配置文件

配置文件類型

項(xiàng)目范圍的配置

相對(duì)文件的配置

6.x vs 7.x .babelrc 加載

支持的文件擴(kuò)展名

單體式倉庫

根 babel.config.json 文件

CLI

@babel/register

Webpack

Jest

子包的 .babelrc.json 文件

配置函數(shù) API

api.version

api.cache

api.env(…)

api.caller(cb)

api.assertVersion(range)

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

方案一、卸載插件

方案二、重新打開文件夾

`6.x vs 7.x` `.babelrc` 加載

根 `babel.config.json` 文件