在 create-react-app 中启用装饰器语法

本文简单介绍了一下如何在 create-react-app 中启用装饰器语法的两种方式。

方式一：暴露 create-react-app 的配置

暴露出 create-react-app 的全部配置

运行命令：

$ npm run eject
复制代码

项目中就会展现出各类配置文件。

在 babel 中添加 plugins 配置

在 package.json 文件中找到 babel 的配置，添加以下代码便可：

package.json

"babel": {
    "presets": [
      "react-app"
    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            { "legacy": true }
+        ]
+    ]
}
复制代码

从新运行项目，便可正常使用装饰器语法。

create-react-app 脚手架中已经安装了 @babel/plugin-proposal-decorators 插件，若是是本身配置的脚手架，请先安装插件：npm install @babel/plugin-proposal-decorators --save-dev

---

方式二：直接在项目的 node-modules 中添加配置

打开项目的 node_modules 文件夹，找到 babel-preset-react-app 目录。打开目录下 create.js 文件。找到 plugins 属性配置的地方，修改以下配置便可：

-isTypeScriptEnabled && [
-    require('@babel/plugin-proposal-decorators').default,
-    false,
-],

+[
+    require('@babel/plugin-proposal-decorators').default,
+    { legacy: true },
+],
复制代码

不建议使用方式二，由于一旦须要从新安装 node_modules， 就须要再去 babel-preset-react-app 里面添加一次配置。

---

总结

上面两种方式使用了以后，都可在项目中正常使用装饰器语法，可是使用装饰器时。可能仍是会出现红线报错提示，此时在 VSCode 的配置文件中（Visual Studio Code左下角的设置按钮(或者文件>首选项>设置)）添加以下配置便可：

setting.json

"javascript.implicitProjectConfig.experimentalDecorators": true,
复制代码

建议使用第一种方式，虽然可能比较麻烦，须要暴露出全部的配置。 可是第二种方式，若是只是本身进行一些小的 Demo 测试还好。否则的话，一旦须要从新安装 node_modules，就须要再从新去 babel-preset-react-app 里面添加一次配置。

---

参考连接

redux connect的装饰器问题