新的npm安裝webpack.js正在拋出塊范圍錯誤

Question

我是Webpack，Visual Studio和Task Runner的新手，但這些是我被告知要在工作中安裝/使用的，所以我在努力弄清楚如何使它全部工作。 我剛剛使用NPM全局安裝webpack和webpack-cli的新副本。 我將Task Runner插件安裝到Visual Studio，並使用提供的Run> Development選項。 神秘的是，我的唯一機器出現以下錯誤，沒有人知道原因：

C:\Users\[me]\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:3
let webpackCliInstalled = false;
^^^
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:429:10)
    at startup (node.js:139:18)
    at node.js:999:3
Process terminated with code 1.

我正在使用最新版本的NodeJS和NPM。 任何想法為什么未經修改的webpack下載會拋出塊范圍錯誤？

編輯：

我看到這個問題引起了一些關注，所以我想我應該提一下問題已經解決了。 不幸的是，解決方案是完全卸載webpack和webpack-cli並重新安裝它們。 然后就行了。 為什么...？ 誰知道？ 我聽說其他人也遇到過這個問題，雖然我從第一次開始就沒有復制過。

Answer 1

轉到Tools > Options > Projects and Solutions > Web Package Management > External Web Tools DESELECT $(VSINSTALLDIR)\\Web\\External的選項。

請參閱Visual Studio Task Runner Error with ES6和Visual Studio Task Runner“SyntaxError：在嚴格模式下使用const”。

Answer 2

今天遇到同樣的問題，對於其他發現這個問題的人來說，解決方案就是確保節點和npm是最新的。 更新那些（建議查看nvm以實現此目的）然后重新安裝webpack和webpack-cli包並且所有包都已排序。

Answer 3

嘗試為像babel及其預設的ES6 systax添加一個加載器。 你可以這樣做：在package.json添加這個依賴項之后的npm install （我的依賴項沒有更新，你可以毫無問題地更新它們）：

"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
}

此外，您必須將此添加到您的webpack.config.js > loaders （設置新加載程序 - babel-loader - ）：

loaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react',
                    'stage-0'
                ],
                plugins: [
                    'react-html-attrs',
                    'transform-decorators-legacy',
                    'transform-class-properties'
                ],
                compact: true
            }
        }
    ]