Holen Sie sich die Versionsnummer von package.json in React Redux (create-react-app)

75

OP EDIT: Wenn jemand anderes darauf stößt: Die App wurde mit create-react-app erstellt , wodurch der Import in den src-Ordner beschränkt wird. Wenn Sie jedoch React-Scripts auf Version 1.0.11 aktualisieren , können Sie auf package.json zugreifen.

Ich versuche, die Versionsnummer von package.json in meiner App abzurufen.

Ich habe diese Vorschläge bereits ausprobiert , aber keiner von ihnen hat funktioniert, da ich von außerhalb des src-Ordners nicht auf package.json zugreifen kann (möglicherweise aufgrund von React, ich bin neu in diesem Bereich). Das Verschieben von package.json in src bedeutet dann, dass ich nicht ausführen npm installkann npm version minor, und zwar npm run buildaus meinem Stammordner. Ich habe versucht, process.env.npm_package_versionaber das führt zu undefiniert.

Ich verwende Jenkins und habe es noch nicht eingerichtet, um die Commits zu beschleunigen, aber die einzige Idee, die ich habe, ist, die Version von den Tags in GitLab zu erhalten, aber ich habe keine Ahnung, wie das geht, und das auch würde dem Repo unnötige Abhängigkeiten hinzufügen, daher würde ich wirklich gerne eine Alternative finden.

EDIT: Meine Dateistruktur ist wie folgt:

--> RootAppFolder
    |--> build
    |--> node_modules
    |--> public
    |--> src
         |--> Components
              |--> Root.js
    |
    |--> package.json

Um von root.js auf package.json zuzugreifen, muss import packageJson from './../../package.json'ich Folgendes tun und erhalte dann die folgende Fehlermeldung:

./src/components/Root.js

Modul nicht gefunden: Sie haben versucht, ./../../package.json zu importieren, das außerhalb des Verzeichnisses src / des Projekts liegt. Relative Importe außerhalb von src / werden nicht unterstützt. Sie können es entweder in src / verschieben oder einen Symlink aus den node_modules / des Projekts hinzufügen.

— Baldeep
quelle

Haben Sie auch die es6-Version ausprobiert?

— Kenfire

"Ich kann von außerhalb des src-Ordners nicht auf package.json zugreifen" - können Sie dies erklären? Wenn package.jsondarauf zugegriffen werden kann, kann die Versionsnummer leicht abgerufen werden.

— Shaochuancs

@kenfire was meinst du? Ich bin mit ES6 nicht sehr vertraut.

— Baldeep

@shaochuancs Ich habe bearbeitet, um zu erklären. Das Verschieben von package.json in den Ordner src funktioniert, um die Version abzurufen, aber dann kann ich keinen der npm-Befehle ausführen, um die App tatsächlich zu erstellen und auszuführen.

— Baldeep

1

@shaochuancs Ja, es stellt sich heraus, dass die App mit der React-Create-App erstellt wurde, die eine Einschränkung durch das Webpack darstellt.

— Baldeep

39

Von Ihrer Bearbeitung würde ich vorschlagen, es zu versuchen

import packageJson from '/package.json';

Sie können auch versuchen, einen Symlink zu erstellen:

# From the project root.
cd src; ln -s ../package.json package.alias.json

Listen Sie den Inhalt des src-Verzeichnisses auf und Sie sehen den Symlink.

ls
#=> package.alias.json -> ../package.json

Das Hinzufügen der .aliashilft, die Magie für andere und Ihr zukünftiges Selbst zu reduzieren, wenn Sie dies betrachten. Außerdem hilft es Texteditoren, sie auseinander zu halten. Du wirst mir später danken. Stellen Sie einfach sicher, dass Sie Ihren JS-Code aktualisieren, um ihn ./package.alias.jsonanstelle von zu importieren ./package.json.

Schauen Sie sich auch diese Frage an: Die Import-React-App importiert die Einschränkung außerhalb des src-Verzeichnisses

— Kenfire
quelle

Während die Importe immer noch nicht funktionierten, wusste ich nicht, dass die App mit der Create-React-App erstellt wurde, von der das Problem stammt. Ich denke, die Lösung besteht darin, in das Webpack zu schauen und es selbst zu konfigurieren und diese Einschränkung zu beseitigen.

— Baldeep

— Ich bin

1

Wie das OP in einer Bearbeitung seiner Frage erwähnt hat, ist dies nicht mehr erforderlich. Mit neueren Versionen von react-scriptskönnen Sie von außerhalb importieren src.

— Joshua Pinter

3

Das Hinzufügen von package.json zu Ihrem Bundle ist keine gute Idee. Es würde alle Ihre Abhängigkeiten potenziellen Angreifern aussetzen, außerdem ist es ein ziemlich großes Objekt und die Daten, die Sie benötigen, sind nur eine Handvoll Bytes.

— Joe Maffei

Dies sollte nicht die akzeptierte Antwort sein. Sie sollten Ihr Anwendungssetup nicht in Ihren Client-Build laden. Antworten mit mehr Upvotes anzeigen, die auf dem Lesen der Umgebungsvariablen zum Zeitpunkt der Erstellung beruhen.

— Eric Burel

136

Die Lösung dieses ohne Import und das Aussetzen package.jsonan diecreate-react-app

Benötigt: Version 1.1.0+ der Create - React -App

.env

REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name

index.js

console.log(`${process.env.REACT_APP_NAME} ${process.env.REACT_APP_VERSION}`)

Hinweis: Auf die Version (und viele andere npm-Konfigurationsparameter ) kann zugegriffen werden

Hinweis 2: Änderungen an der.envDatei werden erst nach einem Neustart des Entwicklungsservers ausgewählt

— Talves
quelle

5

Ich musste .env(als reine Textdatei) im Repository-Stammverzeichnis erstellen , damit es funktioniert. mag es

— Breaker222

4

@JoeMaffei Dies ist eine gute Lösung, aber das Verweisen auf die package.jsonDatei mit import { name, version } from "../package.json";ist weniger kryptisch und erfordert kein Erstellen einer .envDatei.

— Chunky Chunk

2

@ TheDarkIn1978 Aber es wird nicht mit Create React App funktionieren, da es nicht erlaubt, außerhalb von zu referenzieren src/.

— Onkeltem

4

Vergessen Sie nicht, es npm startnach dem Wechsel erneut zu .env

— tun

1

NEXT_PUBLIC_APP_VERSION=$npm_package_versionIch habe gerade festgestellt, dass in einer .env-Datei auch für next.js (ich verwende 9.5.3) funktioniert, obwohl ich es nirgendwo dokumentiert sehe.

— StephenT

39

Versuche dies.

// in package.json
"version": "1.0.0"

// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"

— Vorathep Sumetphong
quelle

1

Ich habe meine Frage bearbeitet, um zu erklären, warum das nicht funktioniert hat.

— Baldeep

11

Dies wird ganze package.json in Ihr Bundle importieren

— inferus-vv

11

@ inferus-vv können Sieimport { version } from '../package.json';

— Stephen Saucier

3

unsicher! Sie möchten Ihre package.json nicht Benutzern und Hackern

— aussetzen

1

@TeodorCiuraru, ja, das tut es. Werfen Sie einen Blick auf create-react-app.dev/docs/adding-custom-environment-variables/… React lib hat einen Mechanismus dafür. Definieren Sie die Umgebungsvariablen REACT_APP_ <SOMETHING>, um ausgewählte Setup-Daten verfügbar zu machen, nicht jedoch das Setup selbst.

— Alina_Lapina

15

Ich denke nicht, dass es richtig ist, eine Version per 'Import' oder 'Require' Paket zu erhalten. Sie können ein Skript in Ihre package.json einfügen

"start": "REACT_APP_VERSION=$npm_package_version react-app-script start",

Sie können es über "process.env.REACT_APP_VERSION" in beliebigen js-Dateien erhalten.

Es funktioniert auch in Build-Skripten wie folgt:

"build": "REACT_APP_VERSION=$npm_package_version react-app-script build",

— Jack Sun.
quelle