为什么试图在反应中导入括号'{'是一个意外的标记？

我正在尝试使用Facebook的固定数据表模块，只需按照此页面上的基本示例： https ： //facebook.github.io/fixed-data-table/

但是，当我尝试使用“npm run prod”（运行“npm webpack -p”）来使用webpack捆绑我的文件时，出现以下错误：

SyntaxError: Unexpected token: punc ({) [./app/index.js:1,0] 

这些只是index.js中的一行：

 import {Table, Column, Cell} from 'fixed-data-table'; 

这就是我的package.json文件的样子：

 { "name": "datatables", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "prod": "webpack -p", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "fixed-data-table": "^0.6.3", "react": "^15.3.1", "react-dom": "^15.3.1" }, "devDependencies": { "babel-core": "^6.13.2", "babel-loader": "^6.2.5", "babel-preset-react": "^6.11.1", "css-loader": "^0.23.1", "html-webpack-plugin": "^2.22.0", "style-loader": "^0.13.1", "webpack": "^1.13.2", "webpack-dev-server": "^1.15.0" } } 

我只是试图让基本示例代码工作。 谢谢。

编辑：添加webpack：

 var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: __dirname + '/app/index.html', filename: 'index.html', inject: 'body' }); var CssWebpack = new HtmlWebpackPlugin({ template: __dirname + '/app/fixed-data-table.css', filename: 'fixed-data-table.css', inject: 'head' }); module.exports = { entry: ['./app/index.js'], output: { path: __dirname + '/dist', filename: "index_bundle.js" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins: [HtmlWebpackPluginConfig] } 

Answer 1

节点当前不支持导入语句。 只需要将预设添加到您的webpack加载程序configuration，它将正确地传输

 npm install babel-preset-es2015 babel-preset-react module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", presets: ["es2015", "react"] }, { test: /\.css$/, loader: "style-loader!css-loader" } ] },