REact.js, react-toolbox 语法错误？

Question

为什么我会收到这个语法错误？？？快把我逼疯了，我知道这很简单……我基本上是从这里复制示例代码的：

http://react-toolbox.com/#/components/input

我只是想将它导入这里：

非常感谢任何建议...

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './app/index.jsx'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'react-toolbox.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
           presets:['es2015','react']
        }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap!toolbox')
      }
    ]
  },
  toolbox: {
    theme: path.join(__dirname, 'app/toolbox-theme.scss')
  },
  postcss: [autoprefixer],
  plugins: [
    new ExtractTextPlugin('react-toolbox.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

package.json:

{
  "name": "react-toolbox-example",
  "version": "0.11.4",
  "description": "A set of complementary tools to ReactJS.",
  "author": "React Toolbox Team (http://github.com/react-toolbox)",
  "contributors": [
    {
      "name": "Javi Jimenez Villar",
      "url": "http://soyjavi.com/",
      "email": "javi.jimenez.villar@gmail.com"
    },
    {
      "name": "Javi Velasco Arjona",
      "url": "http://javivelasco.com/",
      "email": "javier.velasco86@gmail.com"
    }
  ],
  "bugs": {
    "url": "https://github.com/react-toolbox/react-toolbox/issues",
    "email": "issues@react-toolbox.com"
  },
  "keywords": [
    "react",
    "react-component",
    "material design",
    "toolbox",
    "components"
  ],
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "6.3.6",
    "babel-core": "6.7.7",
    "babel-eslint": "6.0.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-react-transform": "2.0.2",
    "babel-preset-es2015": "^6.1.4",
    "babel-preset-react": "^6.1.4",
    "classnames": "^2.2.1",
    "cross-env": "^1.0.1",
    "css-loader": "0.23.1",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "1.0.1",
    "node-sass": "3.4.2",
    "normalize.css": "^4.0.0",
    "postcss-loader": "0.8.2",
    "react": "^15.0.0",
    "react-addons-css-transition-group": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-toolbox": "^0.16.2",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "1.2.3",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "toolbox-loader": "0.0.3",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "scripts": {
    "start": "node ./server",
    "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config ./webpack.config",
    "deploy": "gh-pages -d build"
  },
  "repository": "github:react-toolbox/react-toolbox-example"
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

https://github.com/malexanders/react-toolbox-example

Answer 1

等号应该是冒号。此外，最后一个花括号后需要有一个逗号。

Answer 2

您的代码在 class property 语法上崩溃，该语法目前是第 1 阶段 Ecmascript 提案。为了让 babel 正确地转换它，你需要 stage-1 预设。我会说 stage-0 预设也很常见，它也包括它上面的所有内容。

您甚至可以从您的回购协议的 .babelrc 文件中看到已经想要包含 stage-0 预设：

{
  "plugins": ["es2015", "stage-0"]
}

但是看起来您正在使用此处的 query 键在您的 webpack 配置中覆盖此文件：

query: {
  presets:['es2015', 'react']
}

所以你需要做的是解决这个问题

1) 安装 stage-0 预设

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

2) 将预设添加到您的 webpack.config.js query: presets 数组

query: {
  presets: ['es2015', 'react', 'stage-0']
}

REact.js, react-toolbox 语法错误？

REact.js, react-toolbox syntax error?

reactjs

react-toolbox