使用webpack和babel在react-router上导入意外的令牌

时间:2018-01-07 17:34:22

标签: javascript node.js reactjs babeljs webpack-dev-server

我已经看过很多关于这方面的问题了,我基本上已经完成了所有这些问题,但仍然没有解决我的问题。我正在尝试添加一个简单的" react-router"模块到我的reactjs应用程序。我从here

获取了我的代码

从阅读类似帖子的答案,我知道node.js还不支持es6模块语法。我正在尝试使用Babel和es2015来解决这个问题。

/src/app/index.js

import { Router, Route, browserHistory, Link } from 'react-router';

我从其他答案中读到,当我使用babel时,我需要一个.babelrc文件:

/。babelrc

{
  "preset": ['es2015', 'react']
}

这是我的webpack和package.json文件:

/webpack.config.js

var path = require('path');

module.exports = {

entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
    ]
}

};

/package.json

{
   "name": "react-playlist",
   "version": "1.0.0",
   "description": "A simple react to-do list",
   "main": "index.js",
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "npm run build",
       "build": "webpack -d && webpack-dev-server --content-base src/ --
       inline --hot --port 1234 --history-api-fallback"
   },
   "repository": {
      "type": "git",
      "url": "git+https://github.com/iamshaunjp/react-playlist.git"
   },
   "keywords": [
       "react"
   ],
   "author": "The Net Ninja",
   "license": "MIT",
   "bugs": {
      "url": "https://github.com/iamshaunjp/react-playlist/issues"
   },
   "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
   "dependencies": {
       "babel-cli": "^6.26.0",
       "babel-polyfill": "^6.26.0",
       "babel-preset-node6": "^11.0.0",
       "react": "^15.3.2",
       "react-dom": "^15.3.2",
       "react-router": "^3.0.0"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^6.2.5",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.16.0",
        "babel-preset-react": "^6.16.0",
        "css-loader": "^0.25.0",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.2",
        "webpack-dev-server": "^1.16.1"
     }
}

这是我得到的错误:

import { Router, Route, browserHistory, Link } from 'react-router';
^^^^^^

SyntaxError: Unexpected token import

我做错了什么?

0 个答案:

没有答案