试图在 Visual Studio 2019 中创建 react.js 应用程序时卡住了答案

【问题标题】：Stuck trying to create a react.js app in Visual Studio 2019试图在 Visual Studio 2019 中创建 react.js 应用程序时卡住了
【发布时间】：2023-04-11 08:06:02
【问题描述】：

我正在关注this tutorial 在Visual Studio 中创建一个react.js 应用程序

我正处于打开命令提示符并运行的步骤：

webpack app.tsx --config webpack-config.js

（我已经在node_modules.bin\目录下）

我得到错误：

C:\Users\user.user\Documents\Visual Studio 2019\Projects\WeatherApp\WeatherApp\node_modules\webpack\bin\webpack.js:11 const runCommand = (command, args) => { ^ module.js:434 var compiledWrapper = runInThisContext(wrapper, filename, true); ^ SyntaxError: Unexpected token > 在 Module._compile (module.js:434:25) 在 Object..js (module.js:464:10) 在 Module.load (module.js:353:31) 在 Function._load (module.js:311:12) 在 Array.0 (module.js:484:10) 在 EventEmitter._tickCallback (node.js:190:38)

这是我的 package.json 文件：

{
  "name": "weather-app",
  "version": "0.0.0",
  "description": "WeatherApp",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "eslint": "^5.16.0",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "prettier": "^1.17.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "ts-loader": "^5.4.4",
    "typescript": "^3.3.4000",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

这些版本比教程中指示的版本更新，否则我已经按照指示完成了所有操作。我的机器上安装了 node.js 10.15.3。

tsconfig.json文件内容：

{
    "compilerOptions": {
        "noImplicitAny": false,
        "module": "commonjs",
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "pretty": true,
        "allowJs": true,
        "checkJs": true,
        "target": "es5",
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ],
    "files": [
        "app.tsx"
    ]
}

webpack-config.js：

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

我正在尝试弄清楚如何解决和/或解决此问题。有什么想法吗？

【问题讨论】：

您是否偶然安装了旧版本的 node.js 而不是现代版本？
@WiktorZychla 我安装了最新的 LTS 版本：10.15.3。

标签： node.js reactjs typescript visual-studio-2019

【解决方案1】：

好的，我终于想通了，并不特别关心这个解决方案，但它现在可以工作。我想这与您从哪个目录运行捆绑脚本有关。但是，现在如果我得到更新，它可能会覆盖它。另外，我必须从项目目录而不是 .bin 运行 bundle 命令。

在 .bin 文件夹中，我更改了 webpack-cli.cmd 和 webpack.cmd 的脚本

Webpack.cmd 来自：

@IF EXIST "c:\program files\nodejs\node.exe" (

"%~dp0\node.exe"

 "%~dp0\..\webpack\bin\webpack.js" %*    
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack\bin\webpack.js" %*

    )

到：

@IF EXIST "c:\program files\nodejs\node.exe" (

"c:\程序文件\nodejs\node.exe"

 "%~dp0\..\webpack\bin\webpack.js" %*    
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack\bin\webpack.js" %*          
    )

webpack-cli.cmd 来自：

@IF EXIST "c:\program files\nodejs\node.exe" (

"%~dp0\node.exe"

  "%~dp0\..\webpack-cli\bin\cli.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack-cli\bin\cli.js" %*

到：

@IF EXIST "c:\program files\nodejs\node.exe" (

"c:\程序文件\nodejs\node.exe"

  "%~dp0\..\webpack-cli\bin\cli.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack-cli\bin\cli.js" %*

【讨论】：