Bagaimana untuk Melepasi Pembolehubah Bergantung kepada Alam Sekitar dalam Webpack untuk Apl Sudut?

Melalui Pembolehubah Bergantung Persekitaran dalam Pek Web

Dalam apl Angular ditukar daripada Gulp kepada Webpack, mereplikasi fungsi Gulp-Preprocess menggunakan pek web untuk menggantikan pembolehubah secara dinamik (seperti nama pangkalan data) berdasarkan NODE_ENV memerlukan pendekatan yang berbeza.

Terdapat beberapa pilihan untuk mencapai ini:

DefinePlugin

Gunakan webpack.DefinePlugin untuk menyuntik pembolehubah persekitaran sebagai rentetan JSON terus ke dalam kod.

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

Perhatikan bahawa teknik ini menggantikan rentetan yang sepadan "seadanya", memerlukan format JSON khusus. Struktur kompleks, seperti objek, adalah mungkin, tetapi prinsipnya tetap sama.

EnvironmentPlugin

Gunakan webpack.EnvironmentPlugin, yang secara dalaman menggunakan DefinePlugin. Ia memetakan nilai persekitaran kepada kod, memudahkan sintaks.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Gunakan konfigurasi melalui modul alias:

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

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

Berasaskan pada NODE_ENV, contoh ini dipetakan ke modul seperti ./config/development.js, yang mengeksport konfigurasi yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Melepasi Pembolehubah Bergantung kepada Alam Sekitar dalam Webpack untuk Apl Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!