Bagaimana untuk Meniru Penggantian Pembolehubah Bergantung Persekitaran dalam Webpack untuk Aplikasi Sudut?

Melalui Pembolehubah Bergantung Persekitaran dalam Webpack

Apabila memindahkan aplikasi Angular dari gulp ke webpack, anda mungkin menghadapi cara untuk meniru fungsi menggantikan pembolehubah dalam fail HTML bergantung pada NODE_ENV. Artikel ini menyediakan beberapa pendekatan untuk mencapai perkara ini dalam pek web.

DefinePlugin

DefinePlugin membolehkan anda menggantikan rentetan tertentu "sebagaimana adanya" dengan persekitaran pembolehubah.

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

EnvironmentPlugin

Serupa dengan DefinePlugin, EnvironmentPlugin secara dalaman menggunakannya untuk memetakan nilai persekitaran kepada kod.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Pilihan lain ialah untuk menggunakan konfigurasi melalui modul alias. Dalam kod pengguna:

var config = require('config');

Konfigurasi boleh ditakrifkan seperti berikut:

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

Berdasarkan NODE_ENV (cth., "pembangunan"), fail konfigurasi akan dimuatkan. Konfigurasi yang dieksport daripada fail ini boleh mengandungi pembolehubah bergantung kepada persekitaran.

Dengan menggunakan pendekatan ini, anda boleh mengurus pembolehubah bergantung kepada persekitaran dengan berkesan dalam fail HTML anda semasa proses membina webpack, sama seperti yang anda lakukan dengan tegukan dan teguk-praproses.

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