es7에 대한 babelrc 설정 Decorator가 작동하지 않습니다.

Question

저는 Reobject 프로젝트에서 MobX를 작동 시키려고했습니다. 나는 babelrc 구성을 따라 갔고 transform-decorators-legacy도 설치했는데 내 프로젝트를 실행 한 후에 Parsing error: Unexpected character @을 얻은 것처럼 보입니다.

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

웹팩 데브 설정 : 내가 놓친

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] 
}; 

아무것도 여기

내 babelrc입니까? 여기

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 파일입니다 : 여기

오류를 준다 코드 (Store.js)입니다

{ 
    "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 

Answer 1

좋아, 문제가 해결되었습니다. 내 .eslintrc 파일과 관련이 있습니다.

는 좀 검색 &이 link

ESLint는 기본적으로 같은 장식으로 실험 인 ECMAScript 언어 기능을 지원하지 않습니다 발견했다. 따라서 dev env에 babel-eslint을 설치하고 .eslintrc 파일에 "parser": "babel-eslint"을 추가해야합니다.

나는 그것을했고 내 구문 분석 오류 문제를 해결했습니다.

희망자가 도움이 되었기를 바랍니다.