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")]
});