es7 装饰器的 babelrc 配置不起作用答案

【问题标题】：babelrc config for es7 Decorator not workinges7 装饰器的 babelrc 配置不起作用
【发布时间】：2017-10-03 17:31:45
【问题描述】：

我一直在尝试让 MobX 与我的 React 项目一起工作。我遵循了babelrc 配置并安装了transform-decorators-legacy，但在尝试运行我的项目后，我似乎得到了Parsing error: Unexpected character @。

这是我的 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

【问题讨论】：

能否包含导致错误的代码？您的 .babelrc 看起来是正确的。您也可以尝试更改"es2015" 和"react" 的顺序。
@Tholle，抱歉回复晚了。我添加了给出错误的代码。顺便说一句，我也尝试了您重新安排es2015 和react 顺序的建议，但它仍然对我不起作用。
没问题。愚蠢的问题：你的文件是命名为.babelrc 还是babelrc？
@Tholle 它被命名为.babelrc... 我在想它是我的.eslintrc 文件吗？我已将代码添加到我的帖子中

标签： javascript webpack decorator mobx mobx-react

【解决方案1】：

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

我做了一些搜索并找到了这个link

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

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

希望对大家有所帮助！

【讨论】：