10

MobX文档告诉我，我必须“使用转换插件 transform-decorators-legacy 并确保它在插件列表中排在第一位”，才能让装饰器工作。MobX 样板项目建议我需要一个.babelrc类似的东西：

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
}

如何使用 create-react-app 生成的项目来做到这一点？任何使用装饰器的尝试都会@出错。.babelrc甚至在项目“退出”之后也没有。

4

5 回答 5

11

现在有一个替代方案在接受答案时不可用。它是custom-react-scripts。它可以让你在你的 CRA 应用程序中启用装饰器、SASS 和其他细节。而且它不会弹出。

有一篇很好的媒体文章解释了它背后的想法。

于 2016-10-26T21:34:09.173 回答
9

你不能使用装饰器语法，除非你eject. 但是，你可以不使用 MobX，@因为它只是一个语法糖。

丹·阿布拉莫夫（ Dan Abramov ）阐明了这样做的原因

我们的立场很简单：我们添加足够稳定的转换（如 async/await）或 Facebook 大量使用的转换（如类属性）。只有这样，我们才能有信心建议它们，因为如果标准发生变化，我们将编写并发布一个 codemod 以摆脱它们。

由于我们目前不使用装饰器，因此如果标准变得不兼容，我们不会自行提供迁移路径。此外，Babel 甚至没有正式支持装饰器（-legacy 的存在是有原因的）。当它们配置稍有不正确时，人们就会责怪 React。

您可能还想研究create-react-app-mobx

相关讨论：

于 2016-09-01T03:50:56.590 回答
4

您可以使用https://www.npmjs.com/package/react-app-rewire-mobx

React App Rewired 让你可以访问配置，而不仅仅是设置包。

npm install react-app-rewired --save

// create a file named config-overrides.js

/* config-overrides.js */

const rewireMobX = require('react-app-rewire-mobx');

module.exports = function override(config, env) {
  config = rewireMobX(config, env);
  return config;
}

注意： 这样可以避免弹出。CRA 不支持修改配置https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710。

于 2017-03-30T10:49:14.830 回答
2

现在，你可以推require.resolve('babel-plugin-transform-decorators-legacy')入 node_modules/babel-preset-react-app/index.js 插件数组

于 2017-07-03T00:50:21.080 回答
2

这是我在不弹出的情况下找到的最佳解决方案。替换 create-react-scripts。

https://www.npmjs.com/package/custom-react-scripts

如果您有一个新项目，请在终端中使用它：

create-react-app my-app --scripts-version custom-react-scripts

然后 cd 进入 my-app 目录并创建一个 .env 文件。将 .env 文件编辑为：

REACT_APP_BABEL_STAGE_0=true
REACT_APP_DECORATORS=true

您的应用现在将支持装饰器。

如果您有一个现有的应用程序并想要添加它。然后像上面一样添加 .env ：

npm i custom-react-scripts --save

删除 package.json 中的 react-scripts。不要将脚本从 react-scripts start 更改为 create-react-scripts start。保持脚本不变。

现在用装饰器添加你的 mobx 东西，享受更少的样板代码。

我的最终 package.json

{ "name": "mobx-test", "version": "0.1.0", "private": true, "dependencies": { "custom-react-scripts": "^0.2.1", "mobx": "^3.4.0", "mobx-react": "^4.3.5", "react": "^16.2.0", "react-dom": "^16.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

哦，如果你使用的是 vscode，你会想要隐藏关于不受支持的装饰器的警告。为此，请使用此将 tsconfig.json 文件添加到您的项目中

{ "compilerOptions": { "experimentalDecorators": true, "allowJs": true } }

于 2017-12-05T16:22:04.293 回答