Vscode 擴展 API：找不到模塊'@babel/preset-react'

Question

我想在 VScode 擴展 API 上使用 '@babel/preset-react 編譯 JSX 文件。 在執行此操作時，我遇到了如下錯誤。 我嘗試了幾種安裝方法，但仍然無法獲得任何結果。 它適用於基本節點應用程序，但不適用於 VScode 擴展 API。

Error: Cannot find module '@babel/preset-react'
    at webpackEmptyContext (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:56404:10)
    at resolveStandardizedName (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57964:7)
    at resolvePreset (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57912:10)
js:120:14)
c:\Users\PC\AppData\Local\Programs\Microsoft VS C

代碼塊：

       try {
            let output = babel.transformSync("code", {
                "presets": ["@babel/preset-react"]
            });
            console.log(output)
        } catch (e) {
            console.log(e)
        }

package.json 文件：

{
    "name": "jsx-svg",
    "displayName": "",
    "description": "jsx-svg",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.55.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:jsx-svg.helloWorld"
    ],
    "main": "./dist/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "jsx-svg.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "yarn run package",
        "compile": "webpack",
        "watch": "webpack --watch",
        "package": "webpack --mode production --devtool hidden-source-map",
        "test-compile": "tsc -p ./",
        "test-watch": "tsc -watch -p ./",
        "pretest": "yarn run test-compile && yarn run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@babel/core": "^7.14.0",
        "@babel/plugin-syntax-jsx": "^7.12.13",
        "@babel/plugin-transform-react-jsx": "^7.13.12",
        "@babel/preset-react": "^7.13.13",
        "@babel/template": "^7.12.13",
        "@babel/traverse": "^7.14.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "@types/vscode": "^1.55.0",
        "@typescript-eslint/eslint-plugin": "^4.14.1",
        "@typescript-eslint/parser": "^4.14.1",
        "eslint": "^7.19.0",
        "glob": "^7.1.6",
        "mocha": "^8.2.1",
        "ts-loader": "^8.0.14",
        "typescript": "^4.1.3",
        "vscode-test": "^1.5.0",
        "webpack": "^5.19.0",
        "webpack-cli": "^4.4.0"
    },
    "dependencies": {
        "@types/babel__core": "^7.1.14"
    }
}

Answer 1

該錯誤中最大的提示是webpackEmptyContext 。 這不是 Node 告訴你它無法在文件系統上找到@babel/preset-react" ，而是 Webpack 告訴你它無法從它的包中加載@babel/preset-react" 。

在 Babel 的情況下，以及任何基於對象的配置輸入，這是預期的，因為 Webpack 無法知道

let output = babel.transformSync("code", {
    "presets": ["@babel/preset-react"]
});

將導致 Babel 內部嘗試加載"@babel/preset-react" ，並且 Babel 不能搶先告訴 Webpack 捆綁什么，因為它可以傳遞任何一組選項。

解決這個問題的方法是顯式加載插件並將已經加載的插件傳遞給 Babel，如下所示：

let output = babel.transformSync("code", {
    "presets": [require("@babel/preset-react")]
});