Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam Aplikasi Sudut Anda Menggunakan Webpack?

Melalui Pembolehubah Bergantung Persekitaran dalam pek web

Masalah:

Menukar aplikasi Sudut daripada gulp kepada webpack, anda perlu mencari cara untuk menggantikan pembolehubah bergantung kepada persekitaran (seperti nama pangkalan data) dalam halaman HTML.

Penyelesaian:

Terdapat beberapa kaedah untuk mencapainya menggunakan webpack:

DefinePlugin

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

DefinePlugin menggantikan padanan tepat "sebagaimana adanya", maka rentetan berformat JSON.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin menggunakan DefinePlugin secara dalaman untuk memetakan nilai persekitaran melalui sintaks Terser.

Alias

Buat modul beralias untuk menggunakan konfigurasi:

// Consumer module
var config = require('config');

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

Sebagai contoh, jika process.env.NODE_ENV ialah 'pembangunan', modul beralias akan terletak di ./config/development.js:

// Configuration module for 'development' environment
module.exports = {
    testing: 'something',
    ...
};

Atas ialah kandungan terperinci Bagaimana untuk Lulus Pembolehubah Bergantung Persekitaran dalam Aplikasi Sudut Anda Menggunakan Webpack?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!