درس شانزدهم: فایل‌های CSS و جاوا اسکریپت با Express + ترکیب jQuery

فایل های CSS و جاوا اسکریپت با Express

در قسمت قبل یاد گرفتیم که چطور می توانیم با Express و webpack صفحه HTML خود را به کاربر نمایش دهیم اما به Express توضیح ندادیم که چطور با فایل های استاتیک مانند CSS و جاوا اسکریپت رفتار کند و به همین دلیل به خطا برخورد کردیم. برای انجام این کار باید محتویات فایل CSS یا هر فایل استاتیک دیگری که داریم را به مرورگر کاربر ارسال کنیم (حتی برای تصاویر، فونت ها و الی آخر).

در حال حاضر تمام فایل های استاتیک ما درون پوشه dist هستند بنابراین تنها کاری که باید انجام بدهیم، ارسال فایل های درخواستی توسط مرورگر کاربر به کاربر است:

app.get('/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/index.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

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

app.listen(3000, function () {
    console.log('Application is running on http://localhost:3000');
});

من برای تمام فایل های استاتیک یک URL جدید تعریف کرده ام و سپس با استفاده از متد static در express فایل های استاتیک را به کاربر ارسال می کنیم. برای پاس دادن آدرس فایل ها نیز باید آدرس absolute را داشته باشیم که مثل همیشه با path.resolve قابل دستیابی است. حالا باید به فایل HTML رفته و آدرس فایل های CSS و جاوا اسکریپت را با static/ بازنویسی کنیم. البته اگر این کار را به صورت دستی انجام بدهیم، با هر بار اجرای webpack همه چیز به حالت قبلی برگشته و باید دوباره آن ها را ویرایش کنیم بنابراین راه عاقلانه تر تغییر مسیر publicPath در webpack است.

برای این کار به فایل webpack.production.config.js رفته و مسیر publicPath را به شکل زیر تغییر دهید:

    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '/static/'
    },

با قرار دادن static باید مشکل ما حل شود. پس از ذخیره فایل ها کد npm run build را اجرا کنید تا برنامه به روز رسانی شود. حالا با refresh کردن صفحه، مشکل ما حل می شود و برنامه بالا می آید.

مدیریت برنامه های MPA

تا اینجای کار فقط با برنامه های SPA (مخفف single page application – برنامه های تک صفحه ای) کار کرده ایم اما اگر برنامه ما از نوع MPA بود باید چه کار کنیم؟ من برای این قسمت از کدهای قبلی که در قسمت webpack و برنامه های MPA  داشتیم استفاده می کنم. اگر این کدها را ندارید، آن ها را از این لینک دانلود کنید (درون این فایل فشرده، فایل های hello-world.js و kiwi.js را خواهید دید).

در ابتدا وارد فایل hello-world.js شده و دستور react را از آن حذف کنید:

import React from 'react';

این دستور را قبلا در فایل kiwi.js نیز نوشته بودیم بنابراین آن را نیز باز کرده و دستور بالا را از آن حذف کنید (دیگر نیازی به react نداریم). از آنجایی که برنامه ما دو صفحه جداگانه دارد (kiwi و hello-world) باید دو route جداگانه را در server.js تعریف کنیم. در حال حاضر کدهای فایل server.js من به شکل زیر است:

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

app.get('/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/index.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

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

app.listen(3000, function () {
    console.log('Application is running on http://localhost:3000');
});

بنابراین تا اینجای کار همان کاری را کرده ایم که با برنامه های SPA انجام می دادیم اما باید تغییراتی را در آن ایجاد کنیم. در ابتدا باید URL را به hello-world تغییر دهیم:

app.get('/hello-world/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/hello-world.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

علاوه بر تغییر Route به /hello-world/ قسمت path را نیز روی فایل hello-world.html تنظیم کرده ام تا به فایل مورد نظر ما اشاره کند. برای صفحات بعدی نیز دقیقا باید همین کار را انجام بدهیم، بنابراین این کد را کپی کرده و برای kiwi.js نیز ویرایش می کنم:

app.get('/hello-world/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/hello-world.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

app.get('/kiwi/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/kiwi.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

اگر Express را نصب نکرده اید مانند جلسات قبل حتما آن را نصب کنید. حالا فایل را ذخیره کرده و دستور npm run build را اجرا کنید تا برنامه را تست کنیم. با اجرای دستور npm start هم سرور مجازی ما فعال می شود و می گوید که برنامه روی پورت 3000 در حال اجرا می باشد بنابراین به آدرس localhost:3000/hello-word می رویم. برنامه ما بدون مشکل اجرا خواهد شد. همچنین صفحه دیگر برنامه را در آدرس localhost:3000/kiwi مشاهده خواهیم کرد.

ترکیب jQuery

در قسمت آخر این مقاله می خواهیم jQuery را نیز با webpack ترکیب کنیم. بسیاری از اوقات برنامه نویسان تصور می کنند که برای استفاده از jQuery در پروژه های webpack نیاز به کار خاصی است اما اینطور نیست. بگذارید برای مثال قسمت heading صفحه خودمان را با جی کوئری بنویسیم. در ابتدا در پروژه خود دستور نصب jQuery را اجرا نمایید:

npm install jquery --save

حالا به فایل heading.js می روم و جی کوئری را وارد آن می کنم:

import $ from 'jquery';

در مرحله بعد کدهای این فایل را با جی کوئی می نویسم:

class Heading {
    render(pageName) {
        const h1 = $('<h1>');
        const body = $('body');
        h1.text('Webpack is awesome. This is "' + pageName + '" page');
        body.append(h1);
    }
}

به زبان ساده تر به جای استفاده از document.createElement از syntax خاص بالا استفاده کرده ام. متد های text و append نیز از متد های خاص jQuery هستند. نهایتا دستور npm run build را اجرا می کنم و برنامه را در مرورگر تست می کنیم. برنامه دقیقا مانند قبل کار می کند.