webpack打包错误， Unexpected token: static propTypes...

问题描述

问 题

对一个 redux demo counter 使用webpack打包时出现错误，安装了react、redux、babel相关依赖，好像还是不能识别部分语法:（报错图在最下面）

这是我的依赖：

  "dependencies": {
    "prop-types": "^15.5.8",
    "react": "^15.5.0",
    "react-dom": "^15.5.0",
    "react-redux": "^5.0.2",
    "redux": "^3.5.2",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-es2015-arrow-functions": "^6.4.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.0.15",
    "babel-plugin-transform-react-constant-elements": "^6.0.14",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0"
  },

这是我的webpack.config.js:

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname +'/public',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader', 
            query: {
                presets: ['es2015','react'],
                plugins: [
                  "transform-es2015-modules-commonjs",
                  "transform-react-constant-elements",
                  "transform-es2015-arrow-functions"
               ]
            }
        }]
    }
};

这是我的index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

报错：

解决方案

静态属性,装一下这个插件

npm install --save-dev babel-preset-stage-0

presets里也加一下

presets: ['react', 'es2015', 'stage-0']

这篇关于webpack打包错误， Unexpected token: static propTypes...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！