在 Visual Studio 2019 年尝试创建 react.js 应用程序时遇到困难

Question

我正在关注 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 > at Module._compile (module.js:434:25) at Object..js (module.js:464:10) at Module.load (module.js:353:31) at Function._load (module.js:311:12) at Array.0 (module.js:484:10) at 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'
                }
            }
        ]
    }
}

我正在尝试找出解决方法和/或故障排除方法。有什么想法吗？

Answer 1

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

在 .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:\program files\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:\program files\nodejs\node.exe"

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

在 Visual Studio 2019 年尝试创建 react.js 应用程序时遇到困难

Stuck trying to create a react.js app in Visual Studio 2019

node.js

typescript

reactjs

visual-studio-2019