什么是 babel？
Babel 是一个 JavaScript 编译器，能够将 ES6/ES7/ES8 代码转换成向后兼容的 ES5 代码，以支持更多浏览器和环境。它是一个由开源社区维护的项目，也是 React 生态系统的重要组成部分。
在使用 Babel 编译器时，你需要配置一些插件和预设，以使其能够识别新的语法特性。其中，@babel/plugin-proposal-decorators 插件就是用于支持类装饰器语法的。
什么是 mobx？
Mobx 是一个简单、可扩展的状态管理库，用于 React、React Native 和其他 JavaScript 应用程序。它通过使用观察者模式和反应式编程的思想，将状态和 UI 组件联系起来，从而简化了应用程序的开发和维护。
Mobx 可以通过使用 ES7 语法中的 @observable、@computed 和 @observer 装饰器，将状态作为可观察对象暴露出来，并实时地更新 UI 组件的渲染。
如何配置 babel 支持 mobx 装饰器语法？
要使 Babel 支持 Mobx 装饰器语法，需要按以下步骤进行配置：
- 安装依赖
npm install @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators mobx --save-dev
- 在根目录下创建 babel.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------
----------------------
--
-------- -
------------------------------------- -------- -------
------------------------------------------
--
--这里使用了两个插件，@babel/plugin-proposal-class-properties 可以让你可以在 class 中使用箭头函数并省略 constructor；@babel/plugin-proposal-decorators 是支持装饰器语法的插件，设置 legacy 为 true 则为该插件使用传统的修饰器语法。
- 在 webpack 或 rollup 等打包的配置文件中，通过 babel-loader 将代码进行转换。示例代码如下：
-- -------------------- ---- -------
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- - --------------- ---- --
--
--
--
--示例代码
下面是一个简单的示例代码供参考：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- --------- ------ - ---- -------
------ - -------- - ---- -------------
---------
----- ------- ------- --------- -
----------- ----- - --
---------
--- -------------- -
------ ---------- - --
-
-------
--------- - -- -- -
-------------
--
-------
--------- - -- -- -
-------------
--
-------- -
------ -
-----
----------------
------- -----------------------------------
-------------------------
--------------------------------
------- -----------------------------------
------
--
-
-
------ ------- --------这段代码定义了一个 Counter 组件，它有一个可观察的 count 值和一个通过 computed 计算得到的 doubledCount。同时，通过 @action 装饰器定义了两个方法用于增加和减少计数器的值，并通过 @observer 装饰器将组件设置为可观察对象。
总结
在本文中，我们介绍了如何通过配置 Babel 支持 Mobx 装饰器语法，并给出了一个简单的示例代码。在实际项目中，使用 Mobx 进行状态管理能够更好地提高应用的性能和可维护性，值得开发者们深入学习和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d18c5fb5eee0b5258c7f8f