Adakah pek web berdasarkan node.js?-tutorial js-php.cn

Adakah pek web berdasarkan node.js?

青灯夜游

Lepaskan： 2022-07-12 18:57:20

asal

3016 orang telah melayarinya

Pek web adalah berdasarkan node.js. Webpack ialah alat pembungkusan modul statik untuk aplikasi JavaScript moden. Ia dibangunkan berdasarkan node.js. Ia memerlukan sokongan komponen node.js apabila menggunakannya. Ia perlu dipasang menggunakan npm atau cnpm, dan sintaksnya ialah "cnpm install webpack -g".

Adakah pek web berdasarkan node.js?

Persekitaran pengendalian tutorial ini: sistem Windows 7, nodejs versi 16, komputer DELL G3.

Webpack ialah alat penyusunan kod dengan pintu masuk, keluar, pemuat dan pemalam. webpack ialah alat penggabungan modul statik untuk aplikasi JavaScript moden. Ia akan melakukan analisis statik berdasarkan kebergantungan modul, dan kemudian menjana sumber statik yang sepadan untuk modul ini mengikut peraturan yang ditentukan.

Apabila webpack memproses aplikasi, ia secara dalaman membina graf pergantungan yang memetakan kepada setiap modul yang diperlukan oleh projek dan menjana satu atau lebih berkas.

Webpack ialah alat pembungkusan bahagian hadapan yang dibangunkan berdasarkan node.js Ia memerlukan sokongan komponen node.js apabila menggunakannya.

Pasang Webpack

① Pengendalian Webpack memerlukan Node.js, jadi Node.js perlu dipasang terlebih dahulu.

Selepas pemasangan selesai, masukkan dua baris arahan berikut dalam tetingkap baris arahan Jika nombor versi muncul, pemasangan berjaya.

$ node -v$ npm -v

Salin selepas log masuk

② Kemudian anda boleh memasang Webpack melalui npm (alat pengurusan pakej berdasarkan Node.js)

Oleh kerana sumber npm berada di luar negara, kelajuan pemasangan mungkin perlahan. Anda disyorkan agar menggunakan cnpm cermin npm Taobao. Tetapi satu perkara yang perlu diperhatikan ialah beberapa pakej dalam cnpm akan berbeza (secara umumnya, ia tidak menjejaskan penggunaan)

Konfigurasi cnpm boleh diselesaikan melalui baris kod berikut

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Salin selepas log masuk

Gunakan cnpm untuk memasang webpack:

cnpm install webpack -g

Salin selepas log masuk

Buat projek

Seterusnya kami mencipta apl direktori:

mkdir app

Salin selepas log masuk

Tambahkan fail runoob1.js dalam direktori aplikasi, kodnya adalah seperti berikut:

fail app/runoob1.js

document.write("It works.");

Salin selepas log masuk

Tambahkan fail index.html dalam direktori aplikasi, kodnya adalah seperti berikut:

fail app/index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

Salin selepas log masuk

Seterusnya kami menggunakan arahan webpack untuk membungkus:

webpack runoob1.js bundle.js

Salin selepas log masuk

Melaksanakan arahan di atas akan menyusun fail runoob1.js dan menjana fail js, maklumat output selepas kejayaan adalah seperti berikut:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

Salin selepas log masuk

Buka index.html dalam penyemak imbas, hasil output adalah seperti berikut:

Adakah pek web berdasarkan node.js?