Bolehkah isu laluan import modul diselesaikan semasa penyusunan Webpack?
P粉231079976
P粉231079976 2023-08-26 18:08:57
0
1
519
<p>Saya ingin mencipta binaan yang hanya menyertakan komponen tertentu dalam himpunan berdasarkan pembolehubah persekitaran. </p> <p>Sebagai contoh, apabila saya mengimport komponen seperti ini: </p> <pre class="brush:php;toolbar:false;">import Modul1 daripada '@/components/Module1'</pre> <p>Saya mahu laluan itu benar-benar diubah supaya import kelihatan seperti ini: </p> <pre class="brush:php;toolbar:false;">import Modul1 daripada '@/components/brands/' + process.env.APP_BRAND + 'Module1'</pre> <p>Sekarang, saya tidak mahu melakukan ini untuk semua import, tetapi hanya untuk import tertentu (cth. modul dengan versi berjenama), jadi mungkin saya ingin menambah laluan import dengan sesuatu seperti < kod>!jenama! </code>, yang akan menjadi penunjuk untuk menggunakan transformasi laluan. Oleh itu, logik di atas hanya boleh dilaksanakan untuk laluan import berikut: </p> <pre class="brush:php;toolbar:false;">import Modul1 daripada '!brand!@/components/Module1'</pre> <p>Jika <code>process.env.APP_BRAND</code> adalah palsu, maka saya hanya mahu mengekalkan import asal (cth. alih keluar awalan <code>!brand!</code> daripada laluan). </p> <p>Jadi perkara penting ialah saya mahu ini dilakukan pada masa binaan supaya Webpack boleh menganalisis modul secara statik dan mencipta binaan yang dioptimumkan. Adakah ini boleh dilaksanakan? Saya rasa saya perlu menambah logik penukaran laluan ini entah bagaimana, tetapi bagaimana saya harus melakukannya? Patutkah saya membuat pemuat, pemalam atau adakah penyelesaian sedia dibuat? </p> <p>Saya menggunakan Webpack 5. </p>
P粉231079976
P粉231079976

membalas semua(1)
P粉714844743

Webpack menyediakan fungsi resolve modul yang boleh anda gunakan di sini. Baca dokumentasi di sini. Sebagai contoh, dalam kes anda, anda boleh melakukan ini:

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@/components/Module1': path.join(
        __dirname,
        process.env.APP_BRAND
          ? '@/components/brands/' + process.env.APP_BRAND + 'Module1'
          : '@/components/Module1')
    }
  },
};

Sila ambil perhatian bahawa di sini anda perlu menghantar pembolehubah persekitaran kepada proses Webpack anda (aka proses Node.js) dan membuat keputusan berdasarkan ini. Selain itu, modul azam anda mestilah laluan mutlak.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan