Question

我是webpack的新手，会尝试学习reactJS，但我觉得很难设置。我没有任何使用webpack的经验。

这就是我的所作所为。

我安装

的依赖项

babel-loader babel-core babel-preset-es2015 babel-preset-react webpack react react-dom

安装所有依赖项后。我编辑了package.json

这是我的package.json

{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.13.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "babel", // I put babel and webpack
    "webpack": "webpack" 
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

var path    = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './js/app.js',
    output: {
        path: __dirname,
        filename: './js/app-dist.js'
    },
    watch: true,
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

这里出现了错误。

npm ERR! Windows_NT 6.1.7600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! reactjs@1.0.0 webpack: `webpack`
npm ERR! Exit status 3221225501
npm ERR!
npm ERR! Failed at the reactjs@1.0.0 webpack script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the reactjs package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs reactjs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls reactjs
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     E:\reactjs\npm-debug.log

脚本编译得很好但总是会抛出错误。

任何帮助将不胜感激。 Salamat（谢谢）

Answer 1

您无需将babel和webpack指定为脚本命令。您需要做的是运行webpack来构建您的JSX代码。将脚本更改为

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --config webpack.config.js",
  },

并运行命令npm run build，它应该适合你。

Answer 2

此错误不在您身边。看起来，它只发生在Windows上。这是npm或node的错误。

您可以查看此问题https://github.com/npm/npm/issues/11024

Answer 3

没关系，勇士队的进攻计划涉及到如此多的动作，以至于你们需要一段时间才能让对方感到舒服。我不会为你的损失而烦恼，特别是因为第二个背靠背。展望未来，如果你只是想学习React，那么从create-react-app开始避免所有的脚手架可能会很有用。

苦苦挣扎设置反应，使用webpack的babel

3 个答案: