使用Webpack和Babel意外导入令牌 [英] Unexpected token import with Webpack and Babel

问题描述

我使用Webpack和NodeJS在我的项目中添加了react-router v4.该应用程序已正确编译，日志中没有任何错误消息，但是浏览器控制台为我提供了此功能:

I added react-router v4 to my project with Webpack and NodeJS. The app compiled correctly without any error messages in the log, but the browser console gave me this:

Uncaught SyntaxError: Unexpected token import
    at Object.<anonymous> (bundle.js:3391)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:11:25)
    at Object.eval (eval at <anonymous> (bundle.js:1405), <anonymous>:24:27)
    at eval (eval at <anonymous> (bundle.js:1405), <anonymous>:25:30)
    at Object.<anonymous> (bundle.js:1405)
    at __webpack_require__ (bundle.js:556)
    at fn (bundle.js:87)
    at Object.eval (eval at <anonymous> (bundle.js:3379), <anonymous>:12:17)

我认为问题出在Webpack配置中.这是我的webpack.config.js:

I think that the problem is in the Webpack configuration. This is my webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new NpmInstallPlugin()
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loaders: ['eslint'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      }
    ],
    loaders: [
      {
        loaders: ['react-hot', 'babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.js$/,
        plugins: ['transform-runtime'],
        presets: ['es2015','react']
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },
  postcss: function () {
    return [autoprefixer, precss];
  }
}

这是我的package.json文件:

{
  "name": "redux-ru-tutorial",
  "version": "1.0.0",
  "description": "Redux RU tutorial",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "Yuriy Shipovalov",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "babel-core": "^6.4.5",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "eslint": "^1.10.3",
    "eslint-loader": "^1.2.1",
    "eslint-plugin-react": "^3.16.1",
    "express": "^4.13.4",
    "npm-install-webpack-plugin": "^2.0.2",
    "postcss-loader": "^0.8.0",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.12",
    "webpack-dev-middleware": "^1.5.1",
    "webpack-hot-middleware": "^2.6.4"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "babel-runtime": "^6.3.19",
    "cors": "^2.8.3",
    "history": "^4.6.1",
    "jquery": "^3.2.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-redux": "^4.0.6",
    "react-redux-router": "0.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.3.1",
    "redux-logger": "2.5.2",
    "redux-thunk": "1.0.3"
  }
}

这是我的index.js文件:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import App from './containers/App'
import './styles/app.css'
import configureStore from './store/configureStore'

const store = configureStore()
console.log(store.getState())
render(
  <Provider store={store}>
      <Router>
          <Route> path="/" component={App}></Route>
      </Router>
  </Provider>,
  document.getElementById('root')
)

推荐答案

您正在尝试直接在Webpack配置中将Babel的插件和预设作为module.loaders的一部分进行设置.这是不正确的.您必须将其作为选项传递给 loader .该错误是因为您错误地传递了选项，因此Babel无法接收这些选项，因此不会根据预设以及错误来转换您的代码.

You're attempting to set Babel's plugins and presets directly in the Webpack configuration as part of module.loaders. This is incorrect. You have to pass it as options to the loader. The error is because you're passing the options incorrectly so Babel does not receive the options, and thus does not transpile your code based on the presets and thus the error.

根据您的Webpack版本，尝试:

Depending on your Webpack version, try:

Webpack 1.x

由于有多个加载程序，因此不能在 query 对象.取而代之的是，您将必须设置加载器选项内联:

Since you have multiple loaders, you cannot set it in the query object. Instead, you are going to have to set your loader options inline:

{
    test: /\.js$/,
    loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react?plugins[]=transform-runtime']
}

这将通过查询将加载程序选项直接传递给Babel，但是由于您有两个加载程序，Webpack不知道要查询哪个加载程序，因此您必须在一个加载程序上内联进行操作.

This will directly pass the loader options to Babel through a query, but since you have two loaders Webpack didn't know which loader to query so you have to do it inline on one loader.

这篇关于使用Webpack和Babel意外导入令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！