Cara membungkus dan menggunakan projek web menggunakan Node.js

Node.js ialah platform sumber terbuka bertenaga yang menyediakan banyak perpustakaan dan alatan berguna, menjadikannya salah satu persekitaran pilihan untuk aplikasi web moden. Artikel ini akan memperkenalkan cara menggunakan Node.js untuk membungkus dan menggunakan projek web.

1. Gambaran Keseluruhan

Sebelum membungkus dan melaksanakan projek web, kita perlu memahami beberapa konsep dan alatan asas. Node.js ialah persekitaran masa jalan JavaScript sebelah pelayan. Ia menggunakan enjin V8 untuk mentafsir dan melaksanakan kod JavaScript. Anda boleh menggunakannya untuk membina aplikasi web berprestasi tinggi dan berskala.

npm (Pengurus Pakej Node) ialah pengurus pakej Node.js. Ia membantu kami mencari, memasang dan mengurus pelbagai kebergantungan untuk membangunkan aplikasi web.

Webpack ialah alat pembungkusan yang berkuasa yang boleh membungkus JavaScript, CSS, imej dan fail lain bersama-sama untuk penggunaan aplikasi web.

2. Pasang Node.js dan npm

Sebelum bermula, anda perlu memasang Node.js dan npm. Muat turun pemasang Node.js di tapak web rasmi (https://nodejs.org) dan ikut gesaan untuk memasangnya. npm sudah pun digabungkan dengan Node.js, tidak perlu memasangnya secara berasingan.

Selepas pemasangan selesai, buka alat baris arahan dan masukkan arahan berikut untuk menyemak sama ada Node.js dan npm dipasang dengan betul.

$ node -v
$ npm -v

Jika nombor versi dipaparkan dengan betul, ini bermakna pemasangan telah berjaya.

3 Buat projek web

Sebelum kami mula membungkus dan menggunakan projek web, kami perlu membuat projek web terlebih dahulu. Anda boleh menggunakan mana-mana rangka kerja yang anda kenali, seperti React, Angular, Vue, dsb.

Dalam artikel ini, kami akan menggunakan rangka kerja React sebagai contoh. Pada baris arahan, masukkan arahan berikut untuk mencipta projek React baharu.

$ npx create-react-app my-app

Antaranya, "my-app" adalah nama projek, anda boleh memilih nama anda sendiri dengan sewajarnya.

Selepas projek React dibuat, masukkan direktori projek.

$ cd my-app

Dalam direktori projek, anda boleh melihat banyak fail dan folder, termasuk fail package.json, folder src dan folder awam. Antaranya, fail package.json ialah fail konfigurasi projek. Folder src mengandungi kod sumber dan komponen projek. Folder awam mengandungi beberapa sumber awam, seperti ikon dan templat HTML.

4. Membungkus projek React

Sebelum kita mula menggunakan projek React, kita perlu membungkusnya ke dalam pakej yang boleh digunakan. Webpack boleh digunakan untuk menyelesaikan tugas ini. Webpack boleh membungkus JavaScript, CSS, imej dan fail lain bersama-sama untuk penggunaan mudah aplikasi web.

Dalam baris arahan, masukkan arahan berikut untuk memasang Webpack.

$ npm install webpack webpack-cli --save-dev

Selepas pemasangan selesai, buat fail konfigurasi Webpack baharu. Dalam direktori akar projek, buat fail bernama webpack.config.js dan tambahkan kod berikut.

const path = require('path');

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

Fail konfigurasi ini memberitahu Webpack bahawa fail masukan ialah src/index.js dan fail berpakej akan dikeluarkan kepada dist/bundle.js.

Seterusnya, dalam baris arahan, masukkan arahan berikut untuk membungkus projek React.

$ npx webpack

Selepas pembungkusan selesai, bundle.js yang dijana boleh ditemui dalam folder dist dalam direktori akar projek.

5. Gunakan projek React

Sebelum menggunakan projek React ke persekitaran pengeluaran, kami perlu mengujinya terlebih dahulu. Anda boleh menggunakan Express.js sebagai pelayan web untuk mencipta pelayan mudah untuk menguji aplikasi React yang dibungkus.

Dalam baris arahan, masukkan arahan berikut untuk memasang Express.js.

$ npm install express --save

Selepas pemasangan selesai, cipta fail bernama server.js dalam direktori akar projek dan tambah kod berikut.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(8080);

Kod ini akan mencipta aplikasi Express dan menyediakan aplikasi React yang dibungkus sebagai fail statik. Pergi ke http://localhost:8080 dalam penyemak imbas anda dan anda sepatutnya dapat melihat aplikasi React berjalan.

6. Keluarkan projek React

Selepas berjaya menguji projek React, kami boleh menggunakannya ke persekitaran pengeluaran. Pada ketika ini, kami perlu memuat naik projek ke pelayan web supaya ia boleh diakses oleh orang ramai.

Pada ketika ini, anda boleh menggunakan mana-mana pelayan web untuk mengehoskan aplikasi React anda. Hanya gabungkan folder dist yang dijana selepas pembungkusan dengan direktori akar web dalam pelayan.

7. Ringkasan

Dalam artikel ini, kami membincangkan cara membungkus dan menggunakan projek React menggunakan Node.js. Kami mempelajari beberapa konsep dan alatan asas seperti Node.js, npm, Webpack dan Express.js. Dengan mengikuti artikel ini, anda sepatutnya boleh membungkus dan menggunakan aplikasi React anda dengan mudah ke dalam pengeluaran.

Atas ialah kandungan terperinci Cara membungkus dan menggunakan projek web menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!