使用 Webpack 和 Babel 意外导入令牌

Question

我使用 Webpack 和 NodeJS 将 react-router v4 添加到我的项目中。该应用程序正确编译，日志中没有任何错误消息，但浏览器控制台给了我这个：

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：

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')
)

Answer 1

您正尝试直接在 Webpack 配置中设置 Babel 的插件和预设，作为 module.loaders 的一部分。这是不正确的。您必须将其作为选项传递给 loader。该错误是因为您错误地传递了选项，因此 Babel 没有收到选项，因此不会根据预设转译您的代码，从而导致错误。

根据您的 Webpack 版本，尝试：

Webpack 1.x

由于您有多个加载程序，您不能在query 对象中设置它。相反，您将不得不设置加载器选项内联：

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

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

Answer 2

这是来自webpack documentation的示例：

module.rules 允许你在 webpack 配置中指定多个加载器。这是一种显示加载器的简洁方式，有助于保持代码简洁。它还为您提供了每个加载程序的完整概述。

在你的情况下，你可以：

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          'react-hot','babel-loader'
        ]
      }
    ]
  }

希望这会有所帮助。