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

您的代码在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']
}

Answer 2

等于应该是冒号。另外，在最后一个大括号之后需要有一个逗号。

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

2 个答案: