React and Grunt - Envify NODE_ENV = 'production' e UglifyJS

Question

Sto usando Grunt per creare un progetto React e voglio avere sapori "dev" e "prod". Come reagiscono i documenti:

Per utilizzare React in modalità produzione, impostare la variabile di ambiente NODE_ENV sulla produzione. Un minificatore che esegue l'eliminazione di codice morto come UglifyJS è consigliato per rimuovere completamente il codice aggiuntivo presente nella modalità di sviluppo.

Sono molto nuovo utilizzando grunt, browserify e roba ma vediamo. Il primo problema che ho è con envify, lo uso come una trasformazione:

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, facendo grugnito: dev funziona bene. Quindi, quando si esegue grunt: prod ... Come posso impostare NODE_ENV: 'produzione'? Voglio dire, so che sto passando 'envify' come una trasformazione ma ... Non ho idea di come usarlo.

Dopo questo, ho anche un compito uglify:

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

Così, dopo aver chiamato grugnito: prod, ciò che crea è due file (bundle.js e bundle-min.js). In produzione mi piacerebbe avere solo bundle.min.js. So che posso fare:

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

Ma mmm non so se c'è un modo per rinominare solo che bundle.min .js, credo di sì ... il problema è che nel codice HTML che ho:

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

c'è anche qui un trucco per rendere più accetta sia bundle.js o bundle.min.js?

Grazie in anticipo.

Answer 1

Le trasformazioni sono locali e i pacchetti ben fatti inseriscono le loro trasformazioni nel loro file package.json. A meno che tu non stia utilizzando Envify in il tuo codice, non devi fare nulla con esso.

Quello che ti serve è grunt-env, o un altro modo per impostare le variabili ambientali.

Ecco un'alternativa utilizzando package.json:

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

Il vantaggio è che la persona che utilizza il pacchetto non ha nemmeno bisogno di installare grugnito a livello globale. npm run build verrà eseguito ./node_modules/.bin/grunt build-dev con il set di variabili ambientali corretto.

Answer 2

solo un'aggiunta alla grande risposta da FakeRainBrigand, se si sta eseguendo su Windows (come me), allora avete bisogno di una sintassi leggermente diversa nella vostra sezione scripts:

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

Answer 3

Sia John Reilly e di FakeRainBrigand ' Le risposte di s non hanno funzionato per me. Quello che ha funzionato per me è stato il seguente:

Passaggio 1 - Esegui questo comando in cui si trova il pacchetto.JSON è

npm i grunt-env --save-dev 

Fase 2 - Aggiungere il codice in "EVN:" ai vostri Gruntfile.js entro grunt.initConfig in questo modo:

grunt.initConfig({ 

... 

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

... 

}); 

Fase 3 - Aggiungere il compito grugnito al tuo Gruntfile.js

grunt.loadNpmTasks('grunt-env'); 

Fase 4 - Chiamatela prima brow serificare in questo modo:

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