如何为Mobx启用装饰器？Babel+自定义Webpack配置遇语法错误

嘿，作为Mobx新手碰到这个装饰器语法报错真的太常见了！别慌，咱们一步步配置Babel来支持装饰器，搞定这个Unexpected token错误～

1. 安装必要的Babel插件 #

首先得装两个关键的Babel插件，因为装饰器目前还是ECMAScript的提案阶段，需要插件来转译：

# npm 安装
npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

# 或者用 yarn
yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

2. 配置Babel支持装饰器语法 #

打开你的Babel配置文件（比如babel.config.js或者.babelrc），添加这两个插件，注意顺序很重要：decorators插件必须放在class-properties前面，而且要开启legacy模式（因为Mobx依赖旧版的装饰器提案语法）：

如果是babel.config.js：

module.exports = {
  presets: [/* 你的现有presets，比如@babel/preset-env、@babel/preset-react */],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

如果是.babelrc：

{
  "presets": [/* 你的现有presets */],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

3. 确保Webpack的babel-loader配置正确 #

检查你的Webpack配置文件（webpack.config.js），确保babel-loader正确处理了你的JS/JSX文件，比如：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
      // ...其他loader规则
    ]
  }
};

额外小贴士 #

如果你用的是Mobx 6及以上版本，其实官方也推荐不用装饰器，而是用makeObservable或makeAutoObservable来替代，比如：

import { makeAutoObservable } from "mobx";
import { inject } from "mobx-react";

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    makeAutoObservable(this);
  }
}

export default inject('buttonStore')(YourComponent);

不过如果你偏爱装饰器写法，按照前面的配置就能搞定啦～

内容的提问来源于stack exchange，提问作者cdarwin