Vượt qua các biến phụ thuộc môi trường trong webpack


306

Tôi đang cố gắng chuyển đổi một ứng dụng góc cạnh từ gulp sang webpack. trong gulp tôi sử dụng gulp-pre process để thay thế một số biến trong trang html (ví dụ tên cơ sở dữ liệu) tùy thuộc vào NODE_ENV. Cách tốt nhất để đạt được kết quả tương tự với webpack là gì?


1
Có bí danh làm việc cho bạn?
Juho Vepsäläinen

1
@bebraw: trước khi tôi có thể hiểu được bí danh, tôi đã triển khai giải pháp khác mà bạn đề xuất dựa trên DefinePlugin (). Bây giờ tôi thấy bí danh sẽ là một giải pháp tốt hơn và đôi khi sẽ tái cấu trúc - cảm ơn. Nếu bạn muốn đưa hai giải pháp của mình vào câu trả lời, tôi sẽ vui vẻ chấp nhận nó.
kpg

2
Đã được hướng dẫn ở đây thông qua tin nhắn giao diện điều khiển. Làm thế nào để khắc phục điều này trong Browserify?
GN.

2
Là câu hỏi này đang cố gắng định cấu hình SPA tại thời điểm xây dựng hoặc thời gian tải? Tôi lưu ý hai loại cấu hình cho các SPA: 1) chế độ phát triển hoặc sản xuất và 2) môi trường triển khai, ví dụ: phát triển, dàn dựng, sản xuất. Tôi nghĩ rằng NODE_ENV có thể được sử dụng để định cấu hình cho (1) tại thời điểm xây dựng nhưng làm cách nào để định cấu hình cho (2) khi triển khai, ví dụ: định cấu hình chế độ sản xuất cho các môi trường triển khai khác nhau. Tôi hy vọng điều này có liên quan đến câu hỏi này.
Ashley Aitken

1
@AshleyAitken Câu hỏi tuyệt vời mà tôi không thể tìm thấy câu trả lời cho chủ đề này (có thể tôi đã bỏ lỡ nó), nhưng đã đăng chủ đề mới này: stackoverflow.com/questions/44464504/ Lỗi
David Tesar

Câu trả lời:


427

Có hai cách cơ bản để đạt được điều này.

Xác địnhPlugin

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

Lưu ý rằng điều này sẽ chỉ thay thế các trận đấu "như hiện tại". Đó là lý do tại sao chuỗi có định dạng. Bạn có thể có một cấu trúc phức tạp hơn, chẳng hạn như một đối tượng ở đó nhưng bạn có ý tưởng.

Môi trườngPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPluginsử dụng DefinePluginnội bộ và ánh xạ các giá trị môi trường để mã thông qua nó. Cú pháp terser.

Bí danh

Ngoài ra, bạn có thể sử dụng cấu hình thông qua một mô-đun bí danh . Từ phía người tiêu dùng, nó sẽ trông như thế này:

var config = require('config');

Cấu hình chính nó có thể trông như thế này:

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

Hãy nói process.env.NODE_ENVdevelopment. Nó sẽ ánh xạ vào ./config/development.jsđó. Mô-đun mà nó ánh xạ để có thể xuất cấu hình như thế này:

module.exports = {
    testing: 'something',
    ...
};

3
Cảm ơn đã chỉ ra thực tế rằng nó thay thế các trận đấu "như hiện tại". Tôi đã vật lộn một lúc để tìm ra lý do tại sao mã của tôi lại bị lỗi và đó là vì tôi đã không gói giá trị trong mộtJSON.stringify()
pbojinov

4
Nếu bạn đang sử dụng ES2015, bạn cũng có thể sử dụng phép nội suy chuỗi -'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
user2688473 9/2/2016

1
@ tybro0103 JSON.stringify('development')như có thể không thực sự hữu ích. Thay vào đó JSON.stringify(someVariable)có thể khá!
superjos

1
Bạn nên thiết lập NODE_ENVđể làm điều đó. Làm thế nào để thiết lập mà phụ thuộc vào nền tảng của bạn.
Juho Vepsäläinen

1
@AnyulRivas Vâng. React sử dụng process.env.NODE_ENVmô hình và nó hoạt động.
Juho Vepsäläinen

109

Chỉ là một tùy chọn khác, nếu bạn chỉ muốn sử dụng giao diện cli, chỉ cần sử dụng definetùy chọn webpack. Tôi thêm đoạn script sau vào package.json:

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

Vì vậy, tôi phải chạy npm run build-production.


2
Có tài liệu cho việc này? Tôi không thể Google - định nghĩa :(
Richard

5
Đối với webpack @ 2, "-p" đã là lối tắt cho --opt tối thiểu hóa - quá trình
xác định quy trình.env.NODE_ENV

@okm Tài liệu đề cập -p Bằng với - tối thiểu hóa - tối thiểu hóa - tối thiểu hóa xảy ra theo thứ tự, vì vậy không đề cập đến --define process.env.NODE_ENV = "sản xuất". Có phải cái gì đó đã được gỡ bỏ?
Nader Ghanbari

1
@NaderHadjiGhanbari Nó có trong phiên bản webpack 2 webpack.js.org/api/cli/#shortype
okm

73

Tôi đã điều tra một vài tùy chọn về cách đặt các biến cụ thể cho môi trường và kết thúc với điều này:

Tôi có 2 cấu hình webpack hiện tại:

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')
  }
}),

Trong mã của tôi, tôi nhận được giá trị của API_URL theo cách (ngắn gọn) này:

const apiUrl = process.env.API_URL;

EDIT ngày 3 tháng 11 năm 2016

Tài liệu Webpack có một ví dụ: 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")
})

Với ESLint, bạn cần đặc biệt cho phép các biến không xác định trong mã, nếu bạn có no-undefquy tắc. http://eslint.org/docs/rules/no-undef như thế này:

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

EDIT ngày 7 tháng 9 năm 2017 (Tạo ứng dụng cụ thể cho ứng dụng)

Nếu bạn không định cấu hình quá nhiều, hãy xem Tạo-Phản ứng-Ứng dụng: Tạo-Phản ứng-Ứng dụng - Thêm Biến môi trường tùy chỉnh . CRA vẫn sử dụng Webpack.


2
Bạn có thấy rằng điều này ngăn chặn bất kỳ biến môi trường nào được truyền vào trong thời gian chạy không? Nếu bạn thay thế toàn bộ process.envthì không process.env.PORTgiải quyết được undefinedtrong quá trình xây dựng gói webpack, điều đó có nghĩa là bạn không còn có thể ghi đè cổng từ môi trường?
djskinner

Cám ơn rất nhiều. Cuối cùng một câu trả lời về vấn đề này là dễ hiểu!
Dave Sag

quá trình là gì? Nó từ đâu tới? Nếu nó là một đối tượng nút, làm thế nào để nó vào trình duyệt?
Daniel Birowsky Popeski

Đây là một giải pháp khủng khiếp, bạn có hai webpack.configs gần như hoàn toàn giống nhau ngoại trừ cài đặt NODE_ENV và API_URL
Brian Ogden

1
@BrianOgden Đúng là bạn nên sử dụng một cái gì đó như hợp nhất webpack cho việc này: npmjs.com/package/webpack-merge - Đó là một chút ngoài phạm vi cho câu hỏi này IMO.
truyền giáo

24

Bạn có thể vượt qua bất kỳ đối số dòng lệnh nào mà không cần bổ sung bằng cách sử dụng --envwebpack 2:

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

Sử dụng biến trong webpack.config.js:

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

Nguồn


22

Bạn có thể trực tiếp sử dụng EnvironmentPlugincó sẵn webpackđể có quyền truy cập vào bất kỳ biến môi trường nào trong quá trình dịch mã.

Bạn chỉ cần khai báo plugin trong webpack.config.jstệp của bạn :

var webpack = require('webpack');

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

Lưu ý rằng bạn phải khai báo rõ ràng tên của các biến môi trường bạn muốn sử dụng.


4
Có một ví dụ trong các tài liệu webpack với trường hợp sử dụng này. github.com/webpack/docs/wiki/list-of-plugins#en môiplugin
Technetium

1
Nếu bạn muốn đặt các biến môi trường của mình trong tệp .env, bạn có thể sử dụng gói dotenv và khởi tạo nó trong webpack.config.js. npmjs.com/package/dotenv
Justin McCandless

13

Để thêm vào các câu trả lời cá nhân, tôi thích như sau:

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

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

Sử dụng điều này không có vấn đề biến env hoặc đa nền tảng thú vị (với env vars). Tất cả những gì bạn làm là chạy bình thường webpackhoặc webpack -pcho dev hoặc sản xuất tương ứng.

Tham khảo: Vấn đề Github


Khi xác định giá trị cho quá trình thích 'process.env.NODE_ENV': JSON.stringify('production')hơn process: { env: { NODE_ENV: JSON.stringify('production') } }. Sử dụng cái sau sẽ ghi đè lên đối tượng process có thể phá vỡ tính tương thích với một số mô-đun mong đợi các giá trị khác trên đối tượng process được xác định.
slorenzo

13

Vì Bản chỉnh sửa của tôi trên bài đăng trên của nhà truyền giáo không được chấp thuận , nên đăng thêm thông tin.

Nếu bạn muốn chọn giá trị từ pack.json như số phiên bản đã xác định và truy cập nó thông qua DefinePlugin bên trong Javascript.

{"version": "0.0.1"}

Sau đó, nhập package.json bên trong tương ứng webpack.config , truy cập các thuộc tính bằng cách sử dụng biến nhập khẩu, sau đó sử dụng các thuộc tính trong DefinePlugin .

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

Ví dụ: cấu hình nhất định trên webpack.config đang sử dụng METADATA cho 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.
        }
      }),

Truy cập vào bên trong bất kỳ tập tin bản in nào:

this.versionNumber = process.env.VERSION;

Cách thông minh nhất sẽ là như thế này:

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

Cảm ơn Ross Allen


11

Chỉ cần một câu trả lời khác tương tự như câu trả lời của @ zer0chain. Tuy nhiên, với một sự phân biệt.

Cài đặt webpack -plà đủ.

Nó giống như:

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

Và điều này cũng giống như

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

module.exports = {
  //...

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

Vì vậy, bạn có thể chỉ cần một cái gì đó như thế này trong package.jsontệp Node:

{
  "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",
    ...
  }
}

Chỉ là một vài lời khuyên từ DefinePlugin :

DefinePlugin cho phép bạn tạo các hằng số toàn cầu có thể được cấu hình tại thời điểm biên dịch. Điều này có thể hữu ích để cho phép hành vi khác nhau giữa các bản dựng phát triển và bản dựng phát hành. Ví dụ: bạn có thể sử dụng hằng số toàn cầu để xác định xem việc ghi nhật ký có diễn ra hay không; có lẽ bạn thực hiện đăng nhập vào bản dựng phát triển của mình nhưng không phải trong bản phát hành. Đó là loại kịch bản mà DefinePlugin tạo điều kiện.


Rằng điều này là để bạn có thể kiểm tra nếu bạn gõ 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]

3

Để thêm vào các câu trả lời:

Sử dụng ExtendedDefinePlugin thay vì DefinePlugin

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

ExtendedDefinePlugin sử dụng đơn giản hơn nhiều và được ghi lại :-) link

Vì DefinePlugin thiếu tài liệu tốt, tôi muốn giúp đỡ, bằng cách nói rằng nó thực sự hoạt động như #DEFINE trong c # .

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

Do đó, nếu bạn muốn hiểu cách DefinePlugin hoạt động, hãy đọc phần c # #define. liên kết


2

Tôi thích sử dụng tập tin .env cho môi trường khác nhau.

  1. Sử dụng webpack.dev.config để sao chép env.devvào .env vào thư mục gốc
  2. Sử dụng webpack.prod.config để sao chép env.prodvào .env

và trong mã

sử dụng

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


2

Tôi tìm thấy giải pháp sau đây để dễ dàng nhất để thiết lập biến môi trường cho Webpack 2:

Ví dụ: chúng tôi có cài đặt webpack:

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;

Thêm biến môi trường trong gói web:

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

Xác định biến Plugin và thêm nó vào plugins:

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

Bây giờ khi chạy lệnh webpack, chuyển qua env.NODE_ENVlàm đối số:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

Bây giờ bạn có thể truy cập NODE_ENVbiến bất cứ nơi nào trong mã của bạn.



1

Đây là một cách đã làm việc cho tôi và đã cho phép tôi giữ các biến môi trường của mình DRY bằng cách sử dụng lại tệp 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
}),

0

Tôi không phải là một fan hâm mộ lớn của ...

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

... vì nó không cung cấp bất kỳ loại bảo mật nào. thay vào đó, cuối cùng bạn sẽ tăng cường các công cụ bí mật của mình, trừ khi bạn thêm một gói web vào gitignore 🤷‍♀️ có một giải pháp tốt hơn.

Về cơ bản với cấu hình này một khi bạn biên dịch mã của mình, tất cả các biến env của quá trình sẽ bị xóa khỏi toàn bộ mã, sẽ không có một tiến trình đơn lẻ nào cả. Hãy nhờ vào plugin babel transform-inline-environment-variables PS nếu bạn không muốn kết thúc với cả đống điều không xác định, hãy đảm bảo bạn gọi env.js trước khi webpack gọi babel-loader, đó là lý do tại sao đó là điều đầu tiên gọi webpack. mảng vars trong tệp babel.config.js phải khớp với đối tượng trên env.js. bây giờ chỉ còn một việc cần làm. thêm một .envtệp đặt tất cả các biến env của bạn ở đó, tệp phải ở gốc của dự án hoặc thoải mái thêm nó vào bất cứ nơi nào bạn muốn, chỉ cần đảm bảo đặt cùng một vị trí trên tệp env.js và thêm nó vào gitignore

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

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

Nếu bạn muốn xem toàn bộ babel + webpack + ts hãy lấy nó từ mạng https://github.com/EnetoJara/Node-typescript-babel-webpack.git

và logic tương tự áp dụng cho phản ứng và tất cả các khác

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
    }
})();

tập tin webpack không có plugin 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"],
    };
};

"Bạn cuối cùng đã thúc đẩy công cụ bí mật của bạn, trừ khi bạn thêm một gói web vào gitignore." @Ernesto bạn có thể mở rộng điều đó không?
Katie Byers

Về cơ bản, gói của bạn kết thúc với quá trình.env.BLAHBLAH và đặt giá trị thực tế. Ví dụ, thay vì có process.env.NODE_ENV, bạn kết thúc với sản xuất của Cameron, ý tôi không phải là ví dụ tốt nhất nhưng hãy tưởng tượng một khóa bí mật. Gói của bạn sẽ có giá trị thực và ai biết chuỗi có dây đó là viết tắt của
Ernesto

Hmmm - vâng, những giá trị đó sẽ được nội suy trong phiên bản dựng sẵn , nhưng có lẽ bạn không đẩy nó lên GitHub ...
Katie Byers

-4

Tôi không biết tại sao nhưng không ai thực sự đề cập đến giải pháp đơn giản nhất. Điều này làm việc cho tôi cho nodejs và grunt. Đối với nhiều người, webpack có thể gây nhầm lẫn, bạn chỉ cần sử dụng dòng dưới đây:

process.env.NODE_ENV = 'production';

Với giải pháp trên, bạn không thực sự cần sử dụng envify hoặc webpack. Đôi khi giải pháp mã hóa đơn giản có thể làm việc cho một số người.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.