Die MbX-Dokumente sag mir, ich muss "das transform plugin transform-decorators-legacy verwenden und sicherstellen, dass es zuerst in der plugins-Liste ist", damit die Decorators funktionieren. Das MobX-Boilerplate-Projekt schlägt vor, dass ich ein .babelrc like:
Wie mache ich das mit einem von create-react-app generierten Projekt? Jeder Versuch, @ Decorators Fehler zu verwenden. Es gibt kein .babelrc , selbst nachdem das Projekt "ausgeworfen" wurde.
Sie können die Dekoratorsyntax nur verwenden, wenn Sie eject verwenden . Sie können jedoch MobX ohne @ verwenden, da es sich nur um eine Syntaxzucker handelt.
Dan Abramov hat den Grund dafür angegeben
Unsere Position ist einfach: Wir fügen Transformationen hinzu, die entweder stabil sind Genug (wie async / erwarten) oder stark von Facebook (wie Klasse Eigenschaften). Nur das lässt uns zuversichtlich sein, sie zu empfehlen, Denn wenn sich im Standard etwas ändert, schreiben und veröffentlichen wir ein Codemod, um von ihnen weg zu migrieren.
Da wir derzeit keine Dekoratoren verwenden, nehmen wir das nicht an uns selbst einen Migrationspfad zur Verfügung stellen, wenn der Standard wird unvereinbar. Zusätzlich werden Dekorateure nicht einmal offiziell unterstützt von Babel (-legacy ist aus einem bestimmten Grund da). Und wenn sie konfiguriert sind etwas falsch Leute beschuldigen Reagieren.
Sie können auch in create-react-app-mobx
Ähnliche Diskussionen:
Es gibt jetzt eine Alternative, die zum Zeitpunkt der angenommenen Antwort nicht verfügbar war. Es sind benutzerdefinierte Reaktionsskripte . Damit können Sie Dekorateure, SASS und andere Feinheiten in Ihrer CRA-App aktivieren. Und das ohne Auswerfen.
Es gibt einen schönen Medienartikel , in dem die dahinterstehenden Ideen erklärt werden es.
Das ist die beste Lösung, die ich ohne Auswerfen gefunden habe. Ersetze Create-React-Skripte.
Wenn Sie ein neues Projekt starten, verwenden Sie dieses in Ihrem Terminal:
%Vor%Wechseln Sie dann in das my-app-Verzeichnis und erstellen Sie eine .env-Datei. Bearbeiten Sie die .env-Datei wie folgt:
%Vor%Ihre App unterstützt nun Dekoratoren.
Wenn Sie eine bestehende App haben und diese hinzufügen möchten. Fügen Sie die .env wie oben hinzu:
%Vor%entferne react-scripts in deinem package.json. Ändern Sie nicht die Skripts von react-scripts start to create-react-scripts start. Belassen Sie die Skripte so wie sie sind.
Fügen Sie jetzt Ihre Mobx-Sachen mit Dekorateuren hinzu und genießen Sie weniger Standardcode.
mein endgültiges Paket.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"
}
}
oh und wenn Sie vscode verwenden, möchten Sie die Warnungen über nicht unterstützte Dekoratoren ausblenden. Fügen Sie dazu Ihrem Projekt eine tsconfig.json-Datei mit diesem
hinzu {
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}