React und Grunt - Envify NODE_ENV = 'Produktion' und UglifyJS

Question

Ich verwende Grunt, um ein React-Projekt zu erstellen, und ich möchte 'dev' und 'prod' Aromen haben. Als reaktive Dokumentation sagt:

Um Reagieren im Produktionsmodus zu verwenden, setzen Sie die Umgebungsvariable NODE_ENV auf Produktion. Ein Minifier, der die Eliminierung von toten Codes wie UglifyJS durchführt, wird empfohlen, um den im Entwicklungsmodus vorhandenen zusätzlichen Code vollständig zu entfernen.

Ich bin sehr neu mit Grunt, browserify und Sachen, aber lass uns sehen. Erstes Problem habe ich mit envify ist, verwende ich es als eine Transformation:

browserify: { 
    options: { 
    transform: ['reactify'], 
    extensions: ['.jsx'] 
    }, 
    dev:{ 
    options: { 
     watch: true //Uses watchify (faster) 
    }, 
    src: ['js/app.js'], 
    dest: 'js/bundle.js' 
    }, 
    /** 
    * To use React in production mode, set the environment variable NODE_ENV to production. 
    * A minifier that performs dead-code elimination such as UglifyJS is 
    * recommended to completely remove the extra code present in development mode. 
    **/ 
    prod: { 
    options: { 
    transform: ['envify'] //How to set up NOD_ENV='production' ? 
    }, 
    src: ['js/app.js'], 
    dest: 'js/bundle.js' 
    } 
}, 

Ok, grunzen tun: dev funktioniert gut. Also beim Ausführen von grunt: prod ... Wie kann ich NODE_ENV: 'production' einstellen? Ich meine, ich weiß, dass ich als eine Verwandlung "beneide", aber ... Keine Ahnung, wie ich das benutzen soll.

Danach habe ich auch eine uglify Aufgabe:

uglify: { 
prod: { 
    files: { 
    'js/bundle.min.js': ['js/bundle.js'] 
    } 
} 
} 

So nach Grunzen Aufruf: prod, was es schafft, ist zwei Dateien (bundle.js und bundle-min.js). In der Produktion möchte ich nur bündel.min.js haben. Ich weiß, was ich tun kann:

js/bundle.js ‚: [‘ js/bundle.js']

Aber mmm Ich weiß nicht, ob es eine Möglichkeit ist, einfach zu umbenennen bundle.min Js, ich denke, so ... das Problem ist, dass in dem hTML-Code ich habe:

<script src="js/bundle.js"></script> 

gibt es hier auch einen Trick, um es entweder bundle.js oder bundle.min.js akzeptiert?

Vielen Dank im Voraus.

Answer 1

Transformationen sind lokal und gut gemachte Pakete setzen ihre Transformationen in ihre package.json Datei. Sofern Sie in Ihren eigenen Code envify verwenden, müssen Sie nichts damit tun.

Was Sie tun müssen, ist grunt-env, oder eine andere Möglichkeit zum Festlegen von Umgebungsvariablen.

Hier ist eine Alternative von package.json mit:

{ 
    "scripts": { 
    "build": "NODE_ENV=development grunt build-dev", 
    "dist": "NODE_ENV=production grunt dist" 
    } 
}, 
"devDependencies": { 
    "grunt": "...", 
    "grunt-cli": "..." 
} 

Der Vorteil hierbei ist, dass die Person, die Ihr Paket mit nicht einmal Grunzen global zu installieren. npm run build wird ./node_modules/.bin/grunt build-dev mit der richtigen Umgebungsvariablen ausgeführt.

Answer 2

nur eine Ergänzung zu der großen Antwort von FakeRainBrigand, wenn Sie auf Windows (wie ich) laufen lassen, dann müssen Sie eine leicht unterschiedliche Syntax in Ihrem scripts Abschnitt:

{ 
    "scripts": { 
    "build": "SET NODE_ENV=development&&grunt build-dev", 
    "dist": "SET NODE_ENV=production&&grunt dist" 
    } 
}, 
"devDependencies": { 
    "grunt": "...", 
    "grunt-cli": "..." 
} 

Answer 3

Sowohl John Reilly und FakeRainBrigand ' s Antworten funktionierten nicht für mich. Was für mich funktionierte, war folgendes:

Schritt 1 - Führen Sie diesen Befehl, wo Ihr Paket.json ist

npm i grunt-env --save-dev 

Schritt 2 - Fügen Sie den Code in "evn:", um Ihre Gruntfile.js innerhalb grunt.initConfig etwa so:

grunt.initConfig({ 

... 

env: { 
    prod: { 
     NODE_ENV: 'production' 
    } 
}, 

... 

}); 

Schritt 3 - Fügen Sie die Grunzen Aufgabe auf Ihre Gruntfile.js

grunt.loadNpmTasks('grunt-env'); 

Schritt 4 - Nennen sie es vor der Stirn serify wie folgt:

grunt.registerTask("default", ["env", "browserify"]);