意外的令牌导入 - 反应答案

【问题标题】：Unexpected token import - react意外的令牌导入 - 反应
【发布时间】：2016-09-01 13:29:48
【问题描述】：

我是 react 和 webpack 的新手。每次我运行该程序时，我都会遇到无法解决的问题。我浏览了之前的问题并尝试了他们的解决方案，但问题仍然存在。

webpack

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js',
},
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-0', 'react']
                },
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
        ],
    },
};

App.js

import React from 'react';
import ReactDOM from 'react-dom';

var CommentBox = React.createClass({
    render: function () {
        return (
            <div className="CommentBox">
                Hello, world!I am Comment Box.
            </div>
        );
    }
});

ReactDOM.render(<CommentBox/>, document.getElementById('app'));


package.json 
{
"name": "React-Examples",
"version": "1.0.0",
"description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rakesh",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^15.1.0",
"react-dom": "^15.1.0"
 }}

【问题讨论】：

如果将test: /\.jsx?$/ 更改为test: /\.js?$/ 会怎样？
不，还是一样。
您能否提供有关错误消息的更多信息？是截图还是什么？它会给你一个行号吗？而且您的代码全部打包在一起。让您难以理解应用的结构。
你能用'stage-1'代替'stage-0'吗？
@DhananjayaKuppu 抱歉还是一样。

标签： javascript reactjs webpack babeljs

【解决方案1】：

我复制了你的文件并尝试安装它。

我遇到的是“npm install”只安装依赖项，不安装devDependencies。它有时会发生......这里可能就是这种情况。

你可以试试

npm install --only=dev

你还缺少一个包，babel-preset-stage-0

npm install babel-preset-stage-0 --save-dev

然后尝试再次运行 webpack？

【讨论】：