Question

我有一个React项目设置，我正在尝试将MobX合并到其中。有了这个我必须使用装饰，即

@observable

当我这样做时，我收到以下错误：

https://github.com/mobxjs/mobx

模块构建失败：SyntaxError：意外的令牌（5:22）

class ListStore {       @observable items = ['Pete'，'John'，'Henry'，'Jeff'，'Bob'];   }

我的Webpack配置：

module.exports = {
    entry: './src/App.js',
    output: {
        path: __dirname,
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react'],
                plugins: ['transform-decorators-legacy']
            }
        },
        {
            test: /\.scss?$/,
            exclude: /node_modules/,
            loaders: ['style', 'css', 'sass']
        }]
    }
};

我的ESLint配置：

{
    "parserOptions": {
            "ecmaVersion": 6,
            "ecmaFeatures": {
                "jsx": true
            },
            "sourceType": "module"
    },
    "env": {
            "browser": true,
            "node": true,
            "es6": false
    },
    "ecmaFeatures": {
            "modules": true
    },
    "rules": {
        "strict": [
            2,
            "global"
        ],
        "quotes": [
            2,
            "single"
        ],
        "indent": [
            2,
            4
        ],
        "eqeqeq": [
            2,
            "smart"
        ],
        "semi": [
            2,
            "always"
        ],
        "max-depth": [
            2,
            4
        ],
        "max-statements": [
            2,
            15
        ],
        "complexity": [
            2,
            5
        ]
    }
}

作为一个注释，我是新手使用Webpack以及使用ESLint，所以这可能是一个新问题。然而，在网上进行研究后，我找不到任何有用的东西。（这包括安装'transform-decorators-legacy'Babel插件）。

Answer 1

我认为问题不是装饰器，而是属性初始化器语法。它也可能在此失败：

class ListStore {
  items = ['Pete', 'John', 'Henry', 'Jeff', 'Bob']
}

要支持这些，您可以添加transform-class-properties插件：

$ npm install babel-plugin-transform-class-properties --save

（并相应地更新您的Webpack配置）

或使用包含它的Babel预设（stage-2，stage-1或stage-0）。

使用ES6装饰器时出现意外的标记'@'

1 个答案: