努力使用Webpack设置reactjs和babel

Question

I am new to webpack and will try to learn reactJS but I find it hard to setup. I don't have any experience in working with webpack.

Here's what I did.

I install dependencies which is

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

After installing all the dependencies. I edit the package.json

Here's my 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']
                }
            }
        ]
    }
}

Here's the error thrown.

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

The script compiled well but it always throw an error.

Any help would be appreciated. Salamat (Thanks)

Answer 1

You need not specify babel and webpack as a script command. What you need to do is to run webpack to build your JSX code. Change your script to

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

and run the command npm run build and it should work for you.

Answer 2

This error is not from your side. Looks like, it happens only on Windows. This is a bug with npm or node .

You can check this issue https://github.com/npm/npm/issues/11024

Answer 3

It's OK, the Warriors' offensive schemes involve so much motion that it makes sense that it takes some time for you guys to get comfortable with each other. I wouldn't sweat your losses, especially since the second one was on a back-to-back. Moving forward, if you're just trying to learn React, it might be useful to start with create-react-app to avoid all the scaffolding.