javascript - ./index.js 中的错误模块构建失败 : SyntaxError: Unexpected token

Question

一直在试图找出我的设置或代码有什么问题，试图做 redux 主网站反例，但 index.js 文件中的提供程序有错误？

谁能帮我解决这个问题？谢谢!

Phongs-MacBook-Pro:counter2 phongyewtong$ npm start

> counter@1.0.0 start /Users/phongyewtong/Desktop/counter2
> node server.js

==> 🌎  Listening on port 3000. Open up http://localhost:3000/ in your browser.
webpack built 7971049e2b70cfeba9b5 in 502ms
Hash: 7971049e2b70cfeba9b5
Version: webpack 1.12.9
Time: 502ms
    Asset     Size  Chunks       Chunk Names
bundle.js  45.2 kB       0       main
chunk    {0} bundle.js (main) 7.79 kB [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client-overlay.js 1.01 kB {0} [built]
    [2] (webpack)-hot-middleware/client.js 3.24 kB {0} [built]
    [3] (webpack)-hot-middleware/~/ansi-regex/index.js 145 bytes {0} [built]
    [4] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
    [5] (webpack)-hot-middleware/process-update.js 2.95 kB {0} [built]
    [6] (webpack)/buildin/module.js 251 bytes {0} [built]

ERROR in ./index.js
Module build failed: SyntaxError: /Users/phongyewtong/Desktop/counter2/index.js: Unexpected token (10:2)
   8 | 
   9 | render(
> 10 |   <Provider store={store}>
     |   ^
  11 |     <App />
  12 |   </Provider>,
  13 |   document.getElementById('root')
    at Parser.pp.raise (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:510:12)
    at Parser.pp.parseExprSubscripts (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:265:19)
    at Parser.pp.parseMaybeUnary (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:245:19)
    at Parser.pp.parseExprOps (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:176:19)
    at Parser.pp.parseMaybeConditional (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:158:19)
    at Parser.pp.parseMaybeAssign (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:121:19)
    at Parser.pp.parseExprListItem (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:988:16)
    at Parser.pp.parseCallExpressionArguments (/Users/phongyewtong/Desktop/counter2/node_modules/babylon/lib/parser/expression.js:341:20)
 @ multi main

包.json

{
  "name": "counter",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-redux": "^4.0.6",
    "redux": "^3.0.5",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "expect": "^1.13.4",
    "express": "^4.13.3",
    "jsdom": "^7.2.2",
    "mocha": "^2.3.4",
    "node-libs-browser": "^0.5.3",
    "react-addons-test-utils": "^0.14.5",
    "react-transform-hmr": "^1.0.1",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
}


// When inside Redux repo, prefer src to compiled version.
// You can safely delete these lines in your project.
var reduxSrc = path.join(__dirname, '..', '..', 'src')
var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules')
var fs = require('fs')
if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
  // Resolve Redux to source
  module.exports.resolve = { alias: { 'redux': reduxSrc } }
  // Compile Redux from source
  module.exports.module.loaders.push({
    test: /\.js$/,
    loaders: [ 'babel' ],
    include: reduxSrc
  })
}

Answer 1

您必须指定 babel 预设。你可以使用 .babelrc

{
  "presets": [
    "react",
    "es2015"
  ]
}

或者您可以在加载程序查询中指定它:

loaders: [ 'babel?presets[]=react,presets[]=es2015' ]