Вопрос:

Почему скобка '{' неожиданный знак при попытке импортировать в реагирует?

node.js reactjs npm webpack

1499 просмотра

1 ответ

30 Репутация автора

Я пытаюсь использовать модуль таблицы фиксированных данных Facebook, просто следуя базовому примеру на этой странице: https://facebook.github.io/fixed-data-table/

Тем не менее, я получаю следующую ошибку, когда пытаюсь использовать webpack для связывания моих файлов, используя 'npm run prod', который запускает 'npm webpack -p':

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"
  }
}

Я просто пытаюсь заставить работать базовый пример кода. Благодарю.

редактировать: добавить веб-пакет:

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]
}
Автор: austin Источник Размещён: 22.08.2016 08:59

Ответы (1)


4 плюса

544 Репутация автора

Решение

В настоящее время Node не поддерживает операторы импорта. Нужно просто добавить предустановки в конфигурацию вашего веб-загрузчика, и все будет правильно

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" }
    ]
},
Автор: Carlos Sultana Размещён: 22.08.2016 09:19
Вопросы из категории :
32x32