Bagaimana untuk berkongsi kod antara Node.js dan penyemak imbas?

Berkongsi kod antara bahagian belakang dan bahagian hadapan aplikasi tindanan penuh boleh menjadi tugas yang mencabar. Walau bagaimanapun, ia adalah penting untuk membina aplikasi yang boleh diselenggara dan berskala. Dengan berkongsi kod, kami mengelakkan pertindihan kod, mengurangkan masa pembangunan dan mengekalkan konsistensi merentas aplikasi.

Dalam tutorial ini, kami akan meneroka teknik yang berbeza untuk berkongsi kod antara Node.js dan penyemak imbas, dan mempelajari cara memilih kaedah terbaik untuk projek kami.

Teknologi untuk berkongsi kod antara Node.js dan pelayar

Pengguna boleh berkongsi kod antara node.js dan penyemak imbas seperti berikut -

Modul CommonJS

Modul CommonJS ialah cara yang digunakan secara meluas dan mudah untuk mengatur dan berkongsi kod dalam Node.js. Banyak pakej Node.js dibina menggunakan modul CommonJS kerana ia mudah digunakan.

Walau bagaimanapun, ia tidak berfungsi dalam penyemak imbas secara lalai. Untuk menggunakan modul CommonJS dalam penyemak imbas, kita perlu menggunakan alat seperti Browserify atau Webpack. Alat ini boleh mencipta satu fail JavaScript yang boleh dijalankan dalam Node.js dan penyemak imbas. Bergantung pada persekitaran sasaran, mereka juga boleh menukar kod kami daripada CommonJS kepada modul ES atau sebaliknya.

Jika kami sedang membina aplikasi Node.js dan ingin menggunakan semula beberapa kod sisi pelayan dalam penyemak imbas, modul CommonJS ialah pilihan yang baik.

Modul ES

Modul ES ialah cara moden dan asli untuk mengatur dan berkongsi kod merentas pelayar web dan Node.js. Ia mudah digunakan dan banyak rangka kerja bahagian hadapan moden, seperti React dan Vue.js, menyokong modul ES di luar kotak

Kami boleh berkongsi kod antara Node.js dan penyemak imbas menggunakan pengurus pakej seperti npm atau Yarn. Kami boleh menerbitkan kod sebagai pakej dan memasangnya dalam kedua-dua persekitaran menggunakan pengurus pakej.

Jika kita ingin menggunakan cara moden dan standard untuk menyusun dan berkongsi kod antara bahagian belakang dan bahagian hadapan aplikasi, modul ES ialah pilihan yang bagus.

JavaScript Universal

JavaScript Universal, juga dikenali sebagai JavaScript isomorfik, membolehkan kami menulis kod yang dijalankan pada kedua-dua pelayan dan pelanggan. Ini membantu meningkatkan prestasi, mengurangkan masa muat halaman dan meningkatkan SEO.

JavaScript universal memerlukan banyak konfigurasi awal dan boleh menjadi rumit untuk disediakan. Selain itu, sesetengah perpustakaan dan API mungkin berfungsi secara berbeza pada pelayan dan klien, menyebabkan ralat yang tidak dijangka.

Ini adalah pilihan yang baik jika kita perlu membina aplikasi yang berprestasi dan berskala dengan pemaparan bahagian pelayan dan ingin berkongsi sebanyak mungkin kod antara bahagian belakang dan bahagian hadapan.

Dengan memahami ketiga-tiga kaedah ini, pengguna boleh memilih kaedah yang paling sesuai dengan keperluan projek dan pilihan pembangunan mereka.

Gunakan Webpack untuk berkongsi kod Node.js dengan penyemak imbas

Membina alatan seperti Webpack ialah cara yang berkesan untuk berkongsi kod antara Node.js dan penyemak imbas. Pengguna boleh mengikuti langkah ini untuk berkongsi kod antara Node.js dan penyemak imbas menggunakan Webpack -

Langkah 1 - Mula-mula, kita perlu memasang Webpack pada komputer kita.

npm install --save-dev webpack webpack-cli 

Langkah 2 - Seterusnya, kami perlu mencipta fail konfigurasi Webpack untuk menentukan cara untuk menggabungkan kod kami. Berikut ialah contoh mudah fail:

module.exports = {
   entry: './src/index.js',
   output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
   }
}; 

Langkah 3 - Selepas itu, kita boleh menulis kod seperti biasa dalam Node.js atau penyemak imbas.

Langkah 4 - Sekarang kita perlu menggabungkan kod kita menggunakan arahan berikut -

npx webpack --mode=development 

Langkah 5 - Akhir sekali, kita boleh menggunakan berkas dalam Node.js atau aplikasi penyemak imbas dengan memasukkannya dalam fail HTML atau memerlukannya dalam kod Node.js.

Sebagai contoh, jika kita menggunakan konfigurasi lalai dari langkah 2, kita boleh memasukkan pakej dalam fail HTML seperti ini -

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title> My App </title>
   </head>
   <body>
      <script src = "dist/bundle.js"> </script>
   </body>
</html>

Contoh

Contoh ini menunjukkan cara mentakrif dan mengeksport fungsi untuk Node.js dan penyemak imbas menggunakan kaedah JavaScript biasa. Dalam fail myLibrary.js, kami mentakrifkan dua fungsi greet() dan goodbye(), yang boleh digunakan dalam Node.js dan persekitaran penyemak imbas. Kod menyemak sama ada modul itu wujud dan mengeksport fungsi Node.js sambil mengeksportnya ke objek tetingkap penyemak imbas.

Dalam fail index.js, kami menggunakan fungsi require() untuk mengimport modul myLibrary.js, dan kemudian menggunakan parameter untuk memanggil fungsi yang dieksport selamat tinggal().

Dalam fail index.html, kami memasukkan fail myLibrary.js sebagai teg skrip dan kemudian menggunakan teg skrip untuk memanggil fungsi yang dieksport greet() dengan parameter.

Dengan cara ini kita boleh mencipta asas kod biasa dan boleh diguna semula yang boleh digunakan dalam kedua-dua Node.js dan persekitaran penyemak imbas, dan kod akan berjalan dengan betul dalam setiap persekitaran.

myLibrary.js

if (typeof module !== 'undefined' && module.exports) {
   
   // code for Node.js 
   module.exports = {
      
      // exported functions or objects for Node.js
      greet: function(name) {
         console.log('Hello, ' + name + '!');
      },
      goodbye: function(name) {
         console.log('Goodbye, ' + name + '!');
      }
   };
} else {
   
   // code for the browser
   window.myLibrary = {
      
      // exported functions or objects for the browser
      greet: function(name) {
         alert('Hello, ' + name + '!');
      },
      goodbye: function(name) {
         alert('Goodbye, ' + name + '!');
      }
   };
}

index.js

const myLibrary = require('./myLibrary');
myLibrary.goodbye('Subham'); 

index.html

<html lang="en">
<head>
   <title> NodeJs & Browser </title> 
</head>
<body>
   <script src = "myLibrary.js" > </script>
   <script>
      myLibrary.greet('Subham');
   </script>
</body>
</html>

Output

Dalam tutorial ini, pengguna mempelajari teknik yang berbeza untuk berkongsi kod antara Node.js dan penyemak imbas, termasuk modul CommonJS, modul ES dan JavaScript universal. Setiap kaedah mempunyai kelebihan dan kekurangannya, dan pilihan bergantung pada keperluan projek dan keutamaan pembangunan.

Mengikuti langkah-langkah yang dinyatakan dalam tutorial ini, pengguna boleh mencipta fail konfigurasi Webpack yang menentukan cara kod mereka harus digabungkan, membolehkan mereka menulis kod seperti biasa dalam Node.js atau penyemak imbas. Kami juga melihat contoh cara menggunakan kaedah JavaScript biasa untuk menentukan fungsi yang dieksport untuk Node.js dan penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk berkongsi kod antara Node.js dan penyemak imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!