Webpack由于SyntaxError无法捆绑 [英] Webpack unable to bundle due to SyntaxError

问题描述

我对在Windows上学习Django + ReactJS感兴趣，所以我一步一步地遵循了教程。

I was interested in learning Django + ReactJS on Windows, so I followed this step by step tutorial.

现在，我正处于捆绑阶段。当我运行捆绑程序作为快速完整性检查时：

Now, I'm on the bundling stage. When I run my bundler as a quick sanity check:

$ node_modules/.bin/webpack --config webpack.dev.config.js

我得到 node_modules无法识别为Windows命令。尝试了不同的解决方案后，我发现在 webpack 命令前面使用 node 命令正在执行webpack。

I get node_modules is not recognized as a windows command. After trying different solutions, I found that using the node command in front of the webpack command was executing webpack.

这样做似乎会启动 webpack ，但我收到此错误消息：

Doing that seems to launch webpack but I'm getting this error:

$ node node_modules/.bin/webpack --config webpack.dev.config.js

\node_modules\.bin\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function.Module.runMain (module.js:676:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

是否可能由于package.json而导致错误？

Could this be an error due to package.json?

推荐答案

教程中提供的命令将在基于Unix的系统上运行，但在Windows上。打开您的node_modules / .bin文件夹，注意实际上有两个文件：webpack（Unix）和webpack.cmd（Windows）。

Command provided in the tutorial will work on Unix based system but you are on Windows. Open your node_modules/.bin folder and notice that there are actually two files: webpack (Unix) and webpack.cmd (Windows).

处理这种差异的最简单方法是为了让Node Package Manager（NPM）自动检测系统并为我们运行正确的二进制文件。要使用该功能，请在package.json中创建脚本字段：

The easiest way to handle that difference is to let Node Package Manager (NPM) automatically detect system and run correct binary for us. To use that functionality create scripts field In your package.json:

"scripts": {
   "webpack": "webpack --config ./webpack.config.js"
 }

这里是语法说明：

"scripts": {
   "SCRIPT_NAME": "BINARY_NAME attributes"
}

然后您可以通过以下方式使用它：

Then you can use it this way:

npm run webpack 

您可以在 NPM运行脚本文档。

这篇关于Webpack由于SyntaxError无法捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！