我正在尝试使用装饰器构建JS react项目。我的.babelrc看起来像这样：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-object-assign",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
再次出现添加@ babel / plugin-proposal-decorators问题。
我正在使用babel 7，webpack 4并做出16.5的反应
webpack.config.js：
const path = require("path");
const webpack = require("webpack");
const componentName = "reports-desktop";
const publicFolderRelativePath = "../../../../../../public/js";
const ignorePlugin = new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/);
module.exports = {
entry: './reports-desktop.js'
,
output: {
path: path.resolve(__dirname, publicFolderRelativePath),
filename: `${componentName}.js`
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
ignorePlugin
]
};
package.json：
{
"name": "captain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack -w --mode development --progress --color --display-error-details",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-1": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-plugin-transform-decorators": "^6.24.1",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"webpack": "^4.17.3",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"axios": "^0.18.0",
"dropzone": "^5.5.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react-addons-update": "^15.6.2",
"react-bootstrap": "^0.32.4",
"react-datetime": "^2.15.0",
"react-dnd": "^5.0.0",
"react-dnd-html5-backend": "^5.0.1",
"react-media": "^1.8.0",
"react-tooltip": "^3.8.1"
}
}
我可能使用@ babel / plugin-proposal-decorators错误吗？就像在文档中说的那样，这应该可以解决我的问题，但是仍然出现。
答案 0 :(得分：20)
我遇到了同样的问题，但是我可以通过运行npm install --save-dev @babel/plugin-proposal-decorators并将["@babel/plugin-proposal-decorators", { "legacy": true }]添加到.babelrc的插件部分中来使其工作。
对我来说，.babelrc的插件部分现在看起来像这样：
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
答案 1 :(得分：4)
不幸的是，上述解决方案都不对我有用。因为他们需要您先运行npm run eject，然后...我才不想这样做。要在运行时更改和覆盖Webpack的配置，有一个名为react-app-rewired的软件包，这是应该使用的方法：
首先安装所需的依赖项：
npm i --save-dev customize-cra react-app-rewired
然后将一个名为config-overrides.js的新文件添加到具有此内容的项目的根文件夹中，以启用旧版装饰babel插件：
const {
override,
addDecoratorsLegacy,
disableEsLint
} = require("customize-cra");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint()
);
最后将package.json文件更改为使用react-app-rewired：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
现在像往常一样运行npm start并享受它！
答案 2 :(得分：3)
取自mobxjs。如果仍有问题，请参考this。它帮助了我。
在装饰器旧版模式下babel 7的示例配置：
//.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
请注意，插件排序很重要，并且plugin-proposal-decorators应该是插件列表中的第一个插件
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/preset-env": "^7.1.0"
}
非传统模式装饰器（第2阶段）正在进行中，请参阅＃1732
编辑：更新了配置以显示babel 7的非beta配置
答案 3 :(得分：2)
如果在将ReactJS与MobX一起使用时遇到此错误，
Don't enable decorator syntax, but leverage the MobX built-in utility decorate to apply decorators to your classes / objects.
不要：
import { observable, computed, action } from "mobx";
class Timer {
@observable start = Date.now();
@observable current = Date.now();
@computed
get elapsedTime() {
return this.current - this.start + "milliseconds";
}
@action
tick() {
this.current = Date.now();
}
}
要做：
import { observable, computed, action, decorate } from "mobx";
class Timer {
start = Date.now();
current = Date.now();
get elapsedTime() {
return this.current - this.start + "milliseconds";
}
tick() {
this.current = Date.now();
}
}
decorate(Timer, {
start: observable,
current: observable,
elapsedTime: computed,
tick: action
});
答案 4 :(得分：2)
要在2020年将 Mobx 与 Babel 一起使用...
int#include <iostream>
struct Simplified
{
// 1st operator - I need to detect its presence
template<typename T, int I>
void operator()(T & val1, double val2)
{
std::cout << std::to_string(val1 + val2) << std::to_string(I) << std::endl;
}
// 2nd operator
void operator()(double & val1, double val2)
{
std::cout << std::to_string(val1 + val2) << std::endl;
}
};
template<typename Fn, int I, typename T>
class TemplatedOperatorCheck
{
template<typename U, void(U::*)(T&, double)>
struct SFINAESimple
{ };
template<typename U>
static std::true_type Test(SFINAESimple<U, &U::operator()>*, int);
template<typename U>
static std::true_type Test(SFINAESimple<U, &U::template operator()<T, I>>*, long);
template<typename U>
static std::false_type Test(...);
public:
static constexpr bool kExists = decltype(Test<Fn>(nullptr, 0))::value;
};
int main()
{
auto DoubleOpValid = TemplatedOperatorCheck<Simplified, 0, double>::kExists;
auto IntOpValid = TemplatedOperatorCheck<Simplified, 0, int>::kExists;
std::cout << DoubleOpValid << ' ' << IntOpValid << '\n';
}
因此，只需安装npm i babel-preset-mobx
预设并将其添加到module.exports = {
presets: ['other-presets', 'mobx'],
};
数组内的babel配置文件中。例如在mobx等中。
答案 5 :(得分：2)
截至 2021 年，使用 Create React App 4.0，只需执行以下步骤。
确保不要弹出。
npm i --save-dev customize-cra react-app-rewired
添加 config-overrides.js 与：
const { addDecoratorsLegacy, override } = require('customize-cra')
module.exports = override(addDecoratorsLegacy())
babel.config.js：module.exports = {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}
package.json / scripts 部分并搜索替换 react-scripts -> react-app-rewired。"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
此后，start、build 和 test 命令都将与代码库一起使用。
答案 6 :(得分：1)
package.json
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.5"
webpack.config.js
presets: ["@babel/preset-env", "@babel/preset-react"]
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
答案 7 :(得分：1)
首先，执行命令：
npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save
在项目根目录下创建一个新文件config-overrides.js，然后执行以下操作：
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy()
);
另外，编辑您的package.json文件：
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
然后重新启动。
答案 8 :(得分：1)
将.babelrc重命名为babel.config.json，并且有效 !!!
答案 9 :(得分：0)
我用yarn add @babel/plugin-proposal-decorators
然后，我在babel.config.js部分的plugins中添加了以下内容：
[
require('@babel/plugin-proposal-decorators').default,
{
legacy: true
}
],
最后，我需要重启我的webpack开发服务器。
我还没有测试过，但是就像@christopher bradshaw的答案说的那样，根据babel网站，如果您使用.babelrc进行配置，则将以下内容添加到"plugins"部分：
["@babel/plugin-proposal-decorators", { "legacy": true }]
答案 10 :(得分：0)
我尝试安装babel-plugin-transform-inline-environment-variables并成功。
npm install babel-plugin-transform-inline-environment-variables
答案 11 :(得分：0)
截至 2021 年，如果您已经“运行 Eject”，请编辑路径“/config/jest/BabelTransform”下名为“babelTransform”的文件，如下所示：
...
module.exports = babelJest.createTransformer({
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true,
}
]
],
babelrc: false,
configFile: false,
});
...
它奏效了。