En passant de l'environnement-les variables dépendantes dans webpack

Je suis en train de convertir angulaire application de gulp à webpack. dans gulp-je utiliser gulp-prétraiter pour remplacer certaines variables dans le code html de la page (par exemple, nom de base de données) en fonction de la NODE_ENV. Quelle est la meilleure façon de parvenir à un résultat similaire avec webpack?

  • N'alias travail pour vous?
  • avant que je puisse obtenir ma tête autour de alias, j'ai mis en place l'autre solution proposée en se basant sur DefinePlugin(). Je ne vois maintenant que alias serait une meilleure solution et sera probablement refactoriser un certain temps - grâce. Si vous souhaitez inclure votre deux solutions dans une réponse, je vais heureux de l'accepter.
  • A été dirigé ici par message de la console. Comment résoudre ce problème dans Browserify?
  • Cette question est d'essayer de configurer le SPA au moment de la construction ou de temps de chargement? Je note deux types de configuration pour les SPAs: 1) le développement ou le mode de production, et 2) de l'environnement de déploiement, par exemple, le développement, la mise en scène, la production. Je pense que NODE_ENV peut être utilisé pour la configuration (1) au moment de la construction, mais comment la configurer pour l' (2) lors du déploiement, par exemple, la configuration d'un mode de production pour les différents environnements de déploiement. J'espère que ce n'est pertinente à cette question.
  • juste webpack -p est suffisant
  • Grande question à laquelle je ne pouvais pas trouver une réponse sur ce thread (peut-être que je l'ai raté), mais a affiché ce nouveau thread: stackoverflow.com/questions/44464504/...
  • Est-ce utile? stackoverflow.com/questions/40954400/...
  • Salut, je suis en train d'essayer de comprendre comment cela fonctionne vraiment. DefinePlugin rend les variables accessibles pour le client de l'application. Il met ces variables dans un espace global. Signifie-t-il ces revendeurs à valeur ajoutée sont disponibles dans la fenêtre de l'objet? Est-ce une bonne pratique de le faire?

InformationsquelleAutor kpg | 2015-05-04
  1. 408

    Il y a deux façons de base pour atteindre cet objectif.

    DefinePlugin

    new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

    Noter que ce sera juste remplacer les matchs "comme est". C'est pourquoi la chaîne est dans le format qu'il est. Vous pourriez avoir une structure plus complexe, comme un objet, mais vous obtenez l'idée.

    EnvironmentPlugin

    new webpack.EnvironmentPlugin(['NODE_ENV'])

    EnvironmentPlugin utilise DefinePlugin en interne et des cartes de l'environnement les valeurs de code à travers elle. Terser syntaxe.

    Alias

    Vous pouvez également consommer une configuration par un alias module. Du côté des consommateurs, il devrait ressembler à ceci:

    var config = require('config');

    De Configuration lui-même pourrait ressembler à ceci:

    resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

    Disons process.env.NODE_ENV est development. Il serait carte en ./config/development.js ensuite. Le module cartes de pouvez exporter la configuration comme ceci:

    module.exports = {
    testing: 'something',
    ...
};
    • Merci pour souligner le fait qu'il remplace les matchs "comme est". J'ai eu du mal pendant un certain temps à comprendre pourquoi mon code a été de lancer une erreur et que c'était parce que je n'étais pas à l'emballage de la valeur dans un JSON.stringify()
    • Est-il une raison pour laquelle vous êtes en train de faire JSON.stringify('development') au lieu de simplement '"development"'?
    • Qui donne le même résultat correct. Je vais ajuster la réponse à cette forme donnée c'est un cran plus simple.
    • Si vous utilisez ES2015, vous pouvez également utiliser de la chaîne d'interpolation 'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
    • comme c'est peut-être pas vraiment utile. Au lieu de cela JSON.stringify(someVariable) peut être tout à fait!
    • Comme suggéré par user2688473 "${process.env.NODE_ENV || 'development'}" est bien meilleur choix, parce que vous permet d'outrepasser NODE_ENV dans mnp scripts et également de remplacer mnp scripts en ligne de commande params.
    • Merci. J'ai modifié le long de ces lignes (ES5 style).
    • La variable est remplacée lorsque le webpack faisceaux les fichiers. Comment puis-je parvenir à une heure de déploiement variable de remplacement en fonction de l'environnement, je suis le déploiement d'?
    • Vous devez définir NODE_ENV de le faire. Comment définir en fonction de votre plate-forme.
    • Comment pourrais-je définir les valeurs de l'environnement sur le paquet.json à partir de windows? chaque fois que je fais un appel, il en résulte 'YOUR_VARIABLE' n'est pas reconnu comme une commande interne ou externe, un programme exécutable ou un fichier de commandes.
    • J'ai eu du succès en utilisant une version légèrement différente de la première option, que l'on trouve ici: stackoverflow.com/a/39131600/997127
    • Ouais, c'est essentiellement le même. L'avantage de nidification comme ça, c'est que vous pouvez définir plusieurs touches assez facilement. 🙂
    • Quelqu'un avait du succès avec passage d'une fonction par le biais d'un plugin variable? stackoverflow.com/questions/43502886/...
    • n'est-ce aussi travailler pour des modules externes? je pourrais passer certaines valeurs des constantes globales à des modules en dehors de mon projet?
    • Ouais. Réagir utilise process.env.NODE_ENV modèle et il fonctionne.
    • Pourtant, une autre variante: EnvironmentConfig prend en charge une chouette défaut de comportement, que je trouve intuitive: new webpack.EnvironmentPlugin({NODE_ENV: 'development'}) Cela fournit une valeur par défaut uniquement si NODE_ENV n'est pas déjà défini, dont il sera si vous la définissez sur la ligne de commande, comme dans NODE_ENV=production webpack ...
    • Je viens de migré vers webpack v3 et le code ne fonctionne plus. Tout changement sur cette question @JuhoVepsäläinen?
    • Il pourrait être un bug dans webpack 3. Il y a eu quelques problèmes avec la version. Veuillez consulter l'outil de suivi et d'ouvrir une nouvelle question si vous ne pouvez pas trouver une correspondance.
    • Que faire si je veux charger des variables à DefinePlugin de un .fichier de configuration?
    • Comment est la .env fichier défini? Êtes-vous à l'aide de dotenv ou quelque chose? Il pourrait être préférable d'ouvrir une nouvelle question pour que.
    • Dois dire, de la résoudre "truc", c'est génial. - Je l'utiliser pour résoudre codé en dur local des paquets, mais n'a jamais pensé à l'utiliser pour les entrées externes. Maintenant, je peux passer dynamiquement dans un répertoire config. Merci!

    InformationsquelleAutor Juho Vepsäläinen
  2. 106

    Juste une autre option, si vous souhaitez utiliser une seule interface cli, il suffit d'utiliser la define option de webpack. J'ai ajouter le script suivant dans mon package.json :

    "build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

    Je viens donc d'exécuter npm run build-production.

    InformationsquelleAutor zer0chain
  3. 69

    J'ai étudié quelques options sur la façon de définir spécifiques à l'environnement des variables et des fini avec cela:

    J'ai 2 webpack configs actuellement:

    webpack.production.config.js

    new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

    webpack.config.js

    new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

    Dans mon code j'obtiens la valeur de API_URL dans cette (brève) de manière à:

    const apiUrl = process.env.API_URL;

    EDIT 3 Nov, 2016

    Webpack docs est un exemple: https://webpack.js.org/plugins/define-plugin/#usage

    new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

    Avec ESLint vous devez autoriser expressément les variables non définies dans le code, si vous avez no-undef règle. http://eslint.org/docs/rules/no-undef comme ceci:

    /*global TWO*/
console.log('Running App version ' + TWO);

    7e ÉDITION de la Sep, 2017 (Créer-Réagir-Application spécifique)

    Si vous n'êtes pas dans la configuration de trop, découvrez Créez-Réagir-App: Créer-Réagir-Application - Ajout De Variables D'Environnement. Sous le capot de l'ARC utilise Webpack de toute façon.

    • Avez-vous trouvé que cela a empêché toutes les variables d'environnement qui est passée au moment de l'exécution? Si vous remplacez l'ensemble de process.env puis n'est-ce pas process.env.PORT par exemple se résoudre à undefined au cours de la webpack construire ce qui signifie que vous ne pouvez plus ignorer le port de l'environnement?
    • Merci beaucoup. Enfin une réponse sur ce problème qui est compréhensible!
    • qu'est-ce que processus? où est-il en venir? si c'est un nœud d'objet, comment fait-il dans le navigateur?
    • C'est un terrible solution, vous avez deux webpack.les configs presque identiques, sauf pour la mise NODE_ENV et API_URL
    • Yep c'est, en effet, vous devez utiliser quelque chose comme webpack-fusion pour ceci: npmjs.com/package/webpack-merge - C'est un peu hors de portée pour cette question de l'OMI.
    • J'ai finalement trouvé une solution simple,mon idée était pourquoi y aurait-il plus d'un webpack.config.js fichier, webpack doit charger différents json configurations en fonction de l'environnement cmd webpack appel, voici ma solution github.com/Sweetog/yet-another-angular2-boilerplate
    • J'ai refait certains de mes vieux code, s'est retrouvé à l'aide de webpack-fusionner avec le processus.env.npm_lifecycle_event - cela me permet de faire correspondre l'environnement basé sur le nom de mécanisme national de prévention de script, disent que "si(CIBLE = = = "start") {" serait la cible d'un script appelé "npm de départ de la course": Voir plus loin l'explication ici: medium.com/@brianhan/...
    • Merci beaucoup en raison de /*les DEUX*/ avec ESLint

    InformationsquelleAutor thevangelist
  4. 22

    Vous pouvez utiliser directement le EnvironmentPlugin disponible dans webpack d'avoir accès à toutes les variables d'environnement au cours de la transpilation.

    Vous suffit de déclarer le plugin dans votre webpack.config.js fichier:

    var webpack = require('webpack');

module.exports = {
    /* ... */
    plugins = [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

    Notez que vous devez déclarer explicitement le nom des variables d'environnement que vous souhaitez utiliser.

    InformationsquelleAutor Kuhess
  5. 22

    Vous pouvez passer tout argument de ligne de commande sans plugins supplémentaires à l'aide de --env depuis webpack 2:

    webpack --config webpack.config.js --env.foo=bar

    À l'aide de la variable dans webpack.config.js:

    module.exports = function(env) {
    if (env.foo === 'bar') {
        //do something
    }
}

    Source

    InformationsquelleAutor andruso
  6. 13

    Ajouter au tas de réponses personnellement, je préfère le suivant:

    const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

    À l'aide ce n'est pas funky env variable ou de la croix-plate-forme de problèmes (à env vars). Tout ce que vous faire est d'exécuter la normale webpack ou webpack -p de dev ou de production, respectivement.

    Référence: Github problème

    • Lors de la définition des valeurs de processus préfèrent 'process.env.NODE_ENV': JSON.stringify('production') sur process: { env: { NODE_ENV: JSON.stringify('production') } }. À l'aide de ce dernier remplacera l'objet de processus, qui peut se casser la compatibilité avec certains modules s'attendre à d'autres valeurs sur le processus de l'objet à définir.
    InformationsquelleAutor Goblinlord
  7. 13

    Depuis mon montage sur le post ci-dessus par thevangelist n'a pas été approuvé, l'affichage des informations supplémentaires.

    Si vous voulez récupérer la valeur de paquet.json comme un définies numéro de version et y accéder par DefinePlugin à l'intérieur de Javascript. 

    {"version": "0.0.1"}

    Ensuite, Importez paquet.json à l'intérieur respectifs webpack.config, accéder à l'attribut à l'aide de la variable à l'importation, puis utilisez l'attribut dans le DefinePlugin.

    const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json

    Par exemple, de certaines de configuration sur webpack.config est à l'aide de MÉTADONNÉES pour DefinePlugin: 

    const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR,
  RELEASE_VERSION:_version//Version attribute retrieved from package.json
});

new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
        }
      }),

    L'accès à l'intérieur de toute la machine de fichier:

    this.versionNumber = process.env.VERSION;

    La façon la plus intelligente serait comme ceci:

    //webpack.config.js
plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("./package.json").version)
    })
  ]

    Grâce à Ross Allen

    InformationsquelleAutor Abhijeet
  8. 11

    Juste une autre réponse qui est similaire à @zer0chain de réponse. Cependant, avec une distinction.

    Réglage webpack -p est suffisant.

    C'est la même chose que: 

    --define process.env.NODE_ENV="production"

    Et c'est le même que 

    //webpack.config.js
const webpack = require('webpack');

module.exports = {
  //...

  plugins:[
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

    Ainsi vous pouvez seulement besoin de quelque chose comme cela dans package.json Nœud fichier:

    {
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "webpack -d",
    "production": "webpack -p"
  },
  "author": "prosti",
  "license": "ISC",
  "dependencies": {    
    "webpack": "^2.2.1",
    ...
  }
}

    Juste quelques conseils de la DefinePlugin:

    La DefinePlugin vous permet de créer des constantes globales qui peuvent être configurés au moment de la compilation. Cela peut être utile pour permettre à un comportement différent entre les compilations de développement et de release. Par exemple, vous pouvez utiliser une constante globale pour déterminer si l'enregistrement a lieu; peut-être vous effectuez la journalisation dans votre version de développement, mais pas dans la version release. C'est le genre de scénario, le DefinePlugin facilite.

    Que c'est le cas, vous pouvez vérifier si vous tapez webpack --help

    Config options:
  --config  Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --env     Enviroment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                       [string] [default: The current directory]
  --entry      The entry point                                          [string]
  --watch, -w  Watch the filesystem for changes                        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production" 

                      [boolean]
  --progress   Print compilation progress in percentage                [boolean]
    InformationsquelleAutor prosti
  9. 3

    Ajouter au tas de réponses:

    Utilisation ExtendedDefinePlugin au lieu de DefinePlugin

    npm install extended-define-webpack-plugin --save-dev.

    ExtendedDefinePlugin est beaucoup plus simple à utiliser et est documenté 🙂
    lien

    Parce que DefinePlugin manque une bonne documentation, je veux l'aider, en disant que cela fonctionne réellement comme #DEFINE en c#. 

    #if (DEBUG)
        Console.WriteLine("Debugging is enabled.");
#endif

    Donc, si vous voulez comprendre comment DefinePlugin fonctionne, lire la c# #define doucmentation. lien

    InformationsquelleAutor hannes neukermans
  10. 2

    Je préfère utiliser .fichier de configuration pour les différents environnement.

    1. Utilisation webpack.dev.config pour copier env.dev pour .env dans le dossier racine
    2. Utilisation webpack.prod.config pour copier env.prod pour .env

    et dans le code

    utilisation

    require('dotenv').config();
    const API = process.env.API ## which will store the value from .env file

    InformationsquelleAutor Siva Kandaraj
  11. 2

    J'ai trouvé la solution suivante pour être plus facile à configuration variable d'environnement pour Webpack 2:

    Par exemple, nous avons un webpack paramètres:

    var webpack = require('webpack')

let webpackConfig = (env) => { //Passing envirmonment through
                                //function is important here
    return {
        entry: {
        //entries
        },

        output: {
        //outputs
        },

        plugins: [
        //plugins
        ],

        module: {
        //modules
        },

        resolve: {
        //resolves
        }

    }
};

module.exports = webpackConfig;

    Ajouter la Variable d'Environnement dans Webpack:

    plugins: [
    new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
       }),
]

    Définir Plugin Variable et l'ajouter à plugins:

        new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(env.NODE_ENV || 'development')
    }),

    Maintenant lors de l'exécution de webpack de commande, passer env.NODE_ENV comme argument:

    webpack --env.NODE_ENV=development

//OR

webpack --env.NODE_ENV development

    Vous pouvez maintenant accéder à NODE_ENV variable n'importe où dans votre code.

    InformationsquelleAutor ruddra
  12. 1

    Depuis Webpack v4, il suffit de réglage mode dans votre Webpack config sera de définir la NODE_ENV pour vous (via DefinePlugin). Docs ici.

    InformationsquelleAutor ericsoco
  13. 1

    Voici une manière qui a travaillé pour moi et m'a permis de garder mes variables d'environnement SEC, en réutilisant un fichier json.

    const webpack = require('webpack');
let config = require('./settings.json');
if (__PROD__) {
    config = require('./settings-prod.json');
}

const envVars = {};
Object.keys(config).forEach((key) => {
    envVars[key] = JSON.stringify(config[key]);
});

new webpack.DefinePlugin({
    'process.env': envVars
}),
    InformationsquelleAutor cbaigorri
  14. 0

    Je ne suis pas un grand fan de... 

    new webpack.DefinePlugin({
  'process.env': envVars
}),

    ...comme il ne fournit pas n'importe quel type de sécurité. au lieu de cela, vous vous retrouvez à stimuler votre secret trucs, sauf si vous ajoutez un webpack à gitignore ♀️ il est une meilleure solution.

    De coeur avec cette configuration, une fois que vous compilez votre code de toutes les variables d'environnement sera retiré de l'ensemble du code, il ne va pas être un processus unique.env.VAR grâce à l'babel plugin transform-inline-environment-variables
    PS: si vous ne voulez pas vous retrouver avec tout un tas de annule la définition, assurez-vous que vous appelez la env.js avant webpack appelle babel-chargeur, c'est pourquoi c'est la première chose webpack appels. le tableau de vars dans babel.config.js le fichier doit correspondre à l'objet sur env.js. maintenant il y a un seul tondre chose à faire.
    ajouter un .env fichier mettez tous vos variables d'environnement il existe, le fichier doit être à la racine du projet ou n'hésitez pas à l'ajouter à l'endroit où tu veux, assurez-vous de définir le même emplacement sur le env.js fichier et l'ajouter à gitignore

    const dotFiles = ['.env'].filter(Boolean);

if (existsSync(dotFiles)) {
    require("dotenv-expand")(require("dotenv").config((dotFiles)));
}

    Si vous voulez voir l'ensemble de babel + webpack + ts obtenir à partir de heaw
    https://github.com/EnetoJara/Node-typescript-babel-webpack.git

    et la même logique s'applique à réagir et à tous les autres 

    config
---webpack.js
---env.js
src
---source code world
.env
bunch of dotFiles

    env.js

    "use strict";
/***
I took the main idea from CRA, but mine is more cooler xD
*/
const {realpathSync, existsSync} = require('fs');
const {resolve, isAbsolute, delimiter} = require('path');
const NODE_ENV = process.env.NODE_ENV || "development";
const appDirectory = realpathSync(process.cwd());
if (typeof NODE_ENV !== "string") {
throw new Error("falle and stuff");
}
const dotFiles = ['.env'].filter(Boolean);
if (existsSync(dotFiles)) {
require("dotenv-expand")(require("dotenv").config((dotFiles)));
}
process.env.NODE_PATH = (process.env.NODE_PATH || "")
.split(delimiter)
.filter(folder => folder && isAbsolute(folder))
.map(folder => resolve(appDirectory, folder))
.join(delimiter);
const ENETO_APP = /^ENETO_APP_/i;
module.exports = (function () {
const raw = Object.keys ( process.env )
.filter ( key => ENETO_APP.test ( key ) )
.reduce ( ( env, key ) => {
env[ key ] = process.env[ key ];
return env;
},
{
BABEL_ENV: process.env.ENETO_APP_BABEL_ENV,
ENETO_APP_DB_NAME: process.env.ENETO_APP_DB_NAME,
ENETO_APP_DB_PASSWORD: process.env.ENETO_APP_DB_PASSWORD,
ENETO_APP_DB_USER: process.env.ENETO_APP_DB_USER,
GENERATE_SOURCEMAP: process.env.ENETO_APP_GENERATE_SOURCEMAP,
NODE_ENV: process.env.ENETO_APP_NODE_ENV,
PORT: process.env.ENETO_APP_PORT,
PUBLIC_URL: "/"
} );
const stringyField = {
"process.env": Object.keys(raw).reduce((env, key)=> {
env[key]=JSON.stringify(raw[key]);
return env;
},{}),
};
return {
raw, stringyField
}
})();

    webpack fichier sans plugins troll

    "use strict";
require("core-js");
require("./env.js");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
module.exports = env => {
return {
devtool: "source-map",
entry: path.join(__dirname, '../src/dev.ts'),
externals: [nodeExternals()],
module: {
rules: [
{
exclude: /node_modules/,
test: /\.ts$/,
use: [
{
loader: "babel-loader",
},
{
loader: "ts-loader"
}
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
},
],
},
],
},
node: {
__dirname: false,
__filename: false,
},
optimization: {
splitChunks: {
automaticNameDelimiter: "_",
cacheGroups: {
vendor: {
chunks: "initial",
minChunks: 2,
name: "vendor",
test: /[\\/]node_modules[\\/]/,
},
},
},
},
output: {
chunkFilename: "main.chunk.js",
filename: "name-bundle.js",
libraryTarget: "commonjs2",
},
plugins: [],
resolve: {
extensions: ['.ts', '.js']
}   ,
target: "node"
};
};

    babel.config.js

    module.exports = api => {
api.cache(() => process.env.NODE_ENV);
return {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-transform-classes", {loose: true}],
["@babel/plugin-external-helpers"],
["@babel/plugin-transform-runtime"],
["@babel/plugin-transform-modules-commonjs"],
["transform-member-expression-literals"],
["transform-property-literals"],
["@babel/plugin-transform-reserved-words"],
["@babel/plugin-transform-property-mutators"],
["@babel/plugin-transform-arrow-functions"],
["@babel/plugin-transform-block-scoped-functions"],
[
"@babel/plugin-transform-async-to-generator",
{
method: "coroutine",
module: "bluebird",
},
],
["@babel/plugin-proposal-async-generator-functions"],
["@babel/plugin-transform-block-scoping"],
["@babel/plugin-transform-computed-properties"],
["@babel/plugin-transform-destructuring"],
["@babel/plugin-transform-duplicate-keys"],
["@babel/plugin-transform-for-of"],
["@babel/plugin-transform-function-name"],
["@babel/plugin-transform-literals"],
["@babel/plugin-transform-object-super"],
["@babel/plugin-transform-shorthand-properties"],
["@babel/plugin-transform-spread"],
["@babel/plugin-transform-template-literals"],
["@babel/plugin-transform-exponentiation-operator"],
["@babel/plugin-proposal-object-rest-spread"],
["@babel/plugin-proposal-do-expressions"],
["@babel/plugin-proposal-export-default-from"],
["@babel/plugin-proposal-export-namespace-from"],
["@babel/plugin-proposal-logical-assignment-operators"],
["@babel/plugin-proposal-throw-expressions"],
[
"transform-inline-environment-variables",
{
include: [
"ENETO_APP_PORT",
"ENETO_APP_NODE_ENV",
"ENETO_APP_BABEL_ENV",
"ENETO_APP_DB_NAME",
"ENETO_APP_DB_USER",
"ENETO_APP_DB_PASSWORD",
],
},
],
],
presets: [["@babel/preset-env",{
targets: {
node: "current",
esmodules: true
},
useBuiltIns: 'entry',
corejs: 2,
modules: "cjs"
}],"@babel/preset-typescript"],
};
};
    • "En fin de compte vous augmenter votre secret trucs, sauf si vous ajoutez un webpack à gitignore." @Ernesto pouvez-vous développer sur tous?
    • Fondamentalement, votre bundle se termine avec le processus.env.BLAHBLAH et met la valeur réelle. Par exemple au lieu d'avoir des processus.env.NODE_ENV u jusqu'à la fin avec la “production”, je veux dire que c'est pas le meilleur exemple mais imaginez une clé secrète. Votre faisceau sera la valeur réelle et qui sait ce que câblée chaîne représente ♀️
    • Hmmm oui, ces valeurs seront interpolées dans le intégré version, mais je présume que vous n'êtes pas pousser à GitHub...
    InformationsquelleAutor Ernesto
  15. -4

    Je ne sais pas pourquoi, mais personne n'a vraiment de mentionner la solution la plus simple. Cela fonctionne pour moi, pour nodejs et grunt. Comme pour beaucoup de gens, la webpack peut être déroutant vous pouvez simplement utiliser la ligne ci-dessous:

    process.env.NODE_ENV = 'production';

    Avec la solution ci-dessus, vous n'avez pas vraiment besoin d'utiliser envify ou webpack. Parfois, le simple standard solution peut fonctionner pour certaines personnes.

    InformationsquelleAutor John Skoumbourdis