试图在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：在Function._load的Module.load（module.js：353：31）的Object..js（module.js：464：10）处的Module._compile（module.js：434：25）处出现意外的令牌> （module.js：311：12）在ArrayE（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'
                }
            }
        ]
    }
}

我试图弄清楚如何解决和/或解决这个问题。有任何想法吗？

Answer 1

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

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

Webpack.cmd来自：

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

“％〜Dp 0 \ so.Eh”

 "%~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" (      

“％〜Dp 0 \ so.Eh”

  "%~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" %*