2017-05-05 114 views
2

我一直在努力使我的React项目MobX工作。 我已经按照babelrc配置,也安装了transform-decorators-legacy,但似乎我在尝试运行我的项目后得到Parsing error: Unexpected character @es7的babelrc配置装饰不工作

这里是我的babelrc:

{ 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-1" 
    ], 
    "plugins": ["transform-decorators-legacy"] 
} 

的WebPack开发配置:

import webpack from 'webpack'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import autoprefixer from 'autoprefixer'; 

export default { 
    debug: true, 
    devtool: 'cheap-module-eval-source-map', 
    noInfo: true, 
    entry: [ 
    './src/webpack-public-path', 
    'webpack-hot-middleware/client?reload=true', 
    './src/index' 
    ], 
    target: 'web', 
    output: { 
    path: `${__dirname}/src`, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('development'), 
     __DEV__: true 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new HtmlWebpackPlugin({ 
     template: 'src/index.ejs', 
     minify: { 
     removeComments: true, 
     collapseWhitespace: true 
     }, 
     inject: true 
    }) 
    ], 
    module: { 
    loaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loaders: ['babel']}, 
     {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'}, 
     {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"}, 
     {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}, 
     {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}, 
     {test: /\.ico$/, loader: 'file?name=[name].[ext]'}, 
     {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']} 
    ] 
    }, 
    postcss:()=> [autoprefixer] 
}; 

什么我错过了吗?

这里是代码,给出了错误(Store.js):

import { autorun, observable } from 'mobx'; 

class appStore { 
    @observable userSession = { /*error at this line (4:2) at @observable*/ 
       isUserLogged: false, 
       id: 0, 
       name: '', 
       token: '', 
       memberId: 0, 
       membershipId: 1000 
      } 
} 

这里是我的.eslintrc文件:

{ 
    "extends": [ 
    "eslint:recommended", 
    "plugin:import/errors", 
    "plugin:import/warnings" 
    ], 
    "plugins": [ 
    "react" 
    ], 
    "parserOptions": { 
    "ecmaVersion": 6, 
    "sourceType": "module", 
    "ecmaFeatures": { 
     "jsx": true, 
     "experimentalObjectRestSpread": true 
    } 
    }, 
    "env": { 
    "es6": true, 
    "browser": true, 
    "node": true, 
    "jquery": true, 
    "mocha": true 
    }, 
    "rules": { 
    "quotes": 0, 
    "no-console": 1, 
    "no-debugger": 1, 
    "no-var": 1, 
    "semi": [1, "always"], 
    "no-trailing-spaces": 0, 
    "eol-last": 0, 
    "no-underscore-dangle": 0, 
    "no-alert": 0, 
    "no-lone-blocks": 0, 
    "jsx-quotes": 1, 
    "react/display-name": [ 1, {"ignoreTranspilerName": false }], 
    "react/forbid-prop-types": [1, {"forbid": ["any"]}], 
    "react/jsx-boolean-value": 0, 
    "react/jsx-closing-bracket-location": 0, 
    "react/jsx-curly-spacing": 1, 
    "react/jsx-indent-props": 0, 
    "react/jsx-key": 1, 
    "react/jsx-max-props-per-line": 0, 
    "react/jsx-no-bind": 0, 
    "react/jsx-no-duplicate-props": 1, 
    "react/jsx-no-literals": 0, 
    "react/jsx-no-undef": 1, 
    "react/jsx-pascal-case": 1, 
    "react/jsx-sort-prop-types": 0, 
    "react/jsx-sort-props": 0, 
    "react/jsx-uses-react": 1, 
    "react/jsx-uses-vars": 1, 
    "react/no-danger": 1, 
    "react/no-did-mount-set-state": 1, 
    "react/no-did-update-set-state": 1, 
    "react/no-direct-mutation-state": 1, 
    "react/no-multi-comp": 1, 
    "react/no-set-state": 0, 
    "react/no-unknown-property": 1, 
    "react/prefer-es6-class": 1, 
    "react/prop-types": 1, 
    "react/react-in-jsx-scope": 1, 
    "react/require-extension": 1, 
    "react/self-closing-comp": 1, 
    "react/sort-comp": 1, 
    "react/wrap-multilines": 1 
    }, 
    "globals": { 
    } 
} 

错误消息:

Parse errors in imported module './Store.js': Unexpected character '@' (4:2) import/namespace 
+0

您能否包含导致错误的代码?你的'.babelrc'看起来正确。你也可以尝试改变'“es2015”'和'“react”'的顺序。 – Tholle

+0

@Tholle,谢谢你的回复。我添加了发出错误的代码。顺便说一句,我也尝试了重新安排'es2015'&'react'的顺序的建议,但它仍然不适用于我。 –

+0

没问题。愚蠢的问题:您的文件名为'.babelrc'或'babelrc'? – Tholle

回答

1

好吧,我解决了这个问题。 它与我的.eslintrc文件有关。

我做了一些搜索&发现这个link

ESLint本身并不支持实验ECMAScript语言功能,如装饰。因此,我们需要将babel-eslint安装到我们的开发环境中,并将"parser": "babel-eslint"添加到我们的.eslintrc文件中。

我这样做,它解决了我的解析错误问题。

希望它可以帮助任何人!