Lập trình TypeScript

Build code với webpack

08/04/2023

Build code với webpack để để đóng gói code trong dự án thành code javascript chuẩn, nhỏ gọn, tránh code dư thừa, an toàn, chạy nhanh.

Build code với webpack

Chuẩn bị project để build code với webpack
Thực hiện build code với webpack
Cài và sử dụng thư viện lodash
Build code với webpack cho 1 project đã có

Chuẩn bị project để build code với webpack

1. Tạo cấu trúc file folder như sau để chuẩn bị build code

Trong đó folder src chứa các file .ts, .html và code javascript .

2. Cấu hình typescript

Code cho file tsconfig.json để quy định cách build code cơ bản typescript trong project

{   "compilerOptions": {
        "outDir" : "src/js",
        "target" : "ES2022",
        "removeComments" : true,
        "allowSyntheticDefaultImports": true,
        "module": "es6",
        "allowJs": true,
        "noImplicitAny": true,
    },
}

3. Tạo vài trang html để chuẩn bị build

– file laptop_ds.html

<body> <main></main> </body>
<script src="public/js/laptop_ds.js" type="module"></script>

file laptop_them.html

<body> <main></main> </body>
<script src="public/js/laptop_them.js" type="module"></script>

file laptop_sua.html

<body> <main></main> </body>
<script src="public/js/laptop_sua.js" type="module"></script>

3. Tạo vài module để chuẩn bị build code với webpack

a. File src/base.ts code xong thì biên dịch để có file .js

export const urlAPI:string = "http://localost:4000";
export const pageSize:number = 10;
export interface sanpham {id?:number; ten:string; gia:number; }
export interface nhasx {id:number; ten:string;}

b. File src/module_laptop.js, code xong thì biên dịch để có file .js

import {sanpham}  from './base.js'
export const title:string = "QUẢN TRỊ LAPTOP";
export const danhSachLT = ():string => { 
  let sp1:sanpham = { id:1, ten:'MSI Modern i3 15G4', gia:9000000 }
  return `<p><b>${sp1.ten}</b> <span>${sp1.gia}</soan> </p>`
}
export const formThemLT = ():string => {
  return `<form>
   <p>Tên <input name='ten'></p>
   <p>Giá <input type='number' name='gia'></p>
   <p><button type='button' name='btn'>Thêm</button></p>
  </form>  `
}
export const themLT = (data:sanpham):void => { 
   /* Code gửi thêm laptop lên server*/ 
}
export const formSuaLT = (id:number):string => {
  return `<form>
    <p>Tên <input name='ten'></p> 
    <p>Giá <input type='number' name='gia'></p>
    <p><button type='button' name='btn'>Cập nhật</button></p>
    <input type='hidden' name='id' value='${id}'>
  </form>`
}
export const suaLT = (id:number, data:sanpham):void => { 
   /* gửi cập nhật lên server*/ 
}
export const xoaLT = (id:number):void => { 
   /* gửi yêu cầu xóa laptop lên server*/ 
}
export const chitietLT = (id:number):void => { 
   /*gửi yêu cầu xóa laptop lên server*/ 
}
export const timkiemtLT = (tukhoa:string):void => { 
   /* code lấy laptop theo từ khóa*/ 
}
export * from './base.js'

c. File src/laptop_ds.ts , xong thì biên dịch để có file .js

import { danhSachLT, xoaLT,  title} from './module_laptop.js'
let show = document.querySelector("main")  as HTMLElement;
show.innerHTML=`<h2>${title}</h2>`; 
show.innerHTML+=`<h3>DANH SÁCH LAPTOP</h3>`; 
show.innerHTML+=danhSachLT(); 
function btnXoa_click(id:number){ xoaLT(id);  alert('Đã xóa');  }

d. File src/laptop_them.ts , xong thì biên dịch để có file .js

import { formThemLT, themLT, title, sanpham} from './module_laptop.js'
let show = document.querySelector("main")  as HTMLElement;
show.innerHTML= `<h2>${title}</h2>`; 
show.innerHTML+=`<h3>THÊM LAPTOP</h3>`; 
show.innerHTML+= formThemLT(); 
let form = document.querySelector("main form")  as HTMLFormElement;
form.btn.onclick = function(){
    let data:sanpham = {ten:'a', gia:11 }
    themLT(data); alert('Đã thêm')
}

d. File src/laptop_sua.ts , xong thì biên dịch để có file .js

import { formSuaLT, suaLT, title, sanpham} from './module_laptop.js'
let params = new URLSearchParams(location.search);
let id = Number(params.get("id"));
let show = document.querySelector("main")  as HTMLElement;
show.innerHTML=`<h2>${title}</h2>`; 
show.innerHTML+=`<h3>SỬA LAPTOP</h3>`; 
show.innerHTML+=formSuaLT(id); 
let form = document.querySelector("main form")  as HTMLFormElement;
form.btn.onclick = function(){
    let data:sanpham = {id:id, ten:'a', gia:11 }
    suaLT(id, data);
}

Xem thử các trang html và định dạng cho đẹp nhé. Có thể tham khảo để định dạng như sau

Biên dịch code typescript

Đến đây, biên dịch lần cuối với lệnh tsc để đảm bảo các file đã được dịch vào public/js . Xử lý các lỗi nếu có để bước tiếp theo (build code) chạy tốt.

tsc

Thực hiện build code với webpack

Sau đây là các bước thực hiện build code với webpack. Code project đã được chuẩn bị ở phần trên.

Cài webpack và các module cần dùng

Chạy lệnh sau trong folder project của bạn

npm i webpack webpack-cli @webpack-cli/generators

Sau khi cài xong, project đã có các module cần dùng. Giờ thì tạo file cấu hình để cho webpack hoạt động.

Tạo file cấu hình cho webpack

Trước khi thực hiện buildcode với webpack, bạn cần tạo file cấu hình cho nó. Chạy lệnh sau trong folder project:

npx webpack-cli init

Khi chạy lệnh bạn cần trả lời khá nhiều câu hỏi, tham khảo gợi ý sau để trả lời nhé:

Which of the following JS solutions do you want to use? => TypeScript
Do you want to use webpack-dev-server? => No
Do you want to simplify the creation of HTML files for your bundle? => No
Do you want to add PWA support? => No
Which of the following CSS solutions do you want to use? => CSS Only
Will you be using PostCSS in your project? => No
Do you want to extract CSS for every file? => Yes
Do you like to install prettier to format generated configuration? => Yes
Pick a package manager? => npm
Overwrite package.json? => Yes
Overwrite src\index.ts? => No
Overwrite tsconfig.json? =>Yes

Khi chạy xong, file webpack.config.js được tạo ra trong folder project.

Mở file webpack.config.js quan sát các mục quan trọng : mục entry – các file khởi chạy để build code và mục output – kết xuất khi dịch. Chỉnh để được như sau:

– Mở file package.json: và thêm hoặc chỉnh giá trị các mục cho OK

  "name": "tenproject",
  "version": "1.0.0",
  "description": "mô tả project",
  "keywords": [],
  "author": "tên sinh viên",
  "license": "ISC",

Thực hiện build code

GIờ thì file cấu hình cho webpackk đã có, chạy lệnh sau để build code với webpack

npm run build

Build xong, trong folder dist/public/js của project sẽ có các file .js. Mở lên để xem nhé. Các hằng số sẽ đựợc thay thế bằng giá trị của nó, các biến, hàm khai báo mà không dùng cũng sẽ bị bỏ qua.

Chép các file html, css , images… cần thiết vào folder dist và giờ đây bạn đã có app javascript để dùng, bàn giao, publish lên mạng. Chúc mừng : )

Ghi chú : Nếu lúc build thấy lỗi Module not found: Error: Can’t resolve ‘./module_laptop.js‘ là do trình webpack đang hiểu lầm các file .js cũng nằm trong folder src. Để hết lỗi thì mở các file src/laptop_ds.ts, src/laptop_them.ts, src/laptop_sua.ts, module_laptop.ts và xóa bỏ code .js rồi build lại. Khi build xong sẽ phải thấy có các file js trong folder dist/public/js

Cài và sử dụng thư viện lodash

Lodash là thư viện hay, cung cấp nhiều hàm hữu ích để bạn dùng trong lập trình javascript, typescript. Để cài thêm lodash trong project typescript, chạy lệnh sau:

npm i @types/lodash lodash

Giờ thì trong folder src tạo mới 1 file typesrcipt (ví dụ mang_lodash.ts ) để thử, code như sau :

import * as _ from "lodash";
let arr =  [1258, 938, 1954, 1285, 1428 ];
let lonnhat = _.max(arr);
let nhonhat = _.min(arr);
let tong = _.sum(arr);
console.log(lonnhat, nhonhat, tong);

Mở file webpack.config.js và khai báo thêm entry

Build lại code : npm run build Xong tìm trong dist/public/js phải có file mang_lodash.js. Bạn tạo mới file dist/mang_lodash.html và nhúng file .js vừa mới build để chạy thử nhé.

Build code với webpack cho 1 project đã có

Sau khi thực tập như trên, để hiểu thêm bạn hãy thực tập thử build code với webpack cho 1 project nào đó đã có. Như lab4 chẳng hạn.

Cần tham khảo thêm, xem link này nhé https://webpack.js.org/guides/typescript/, https://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html

Build code với webpack

Chuẩn bị project để build code với webpack

1. Tạo cấu trúc file folder như sau để chuẩn bị build code

2. Cấu hình typescript

3. Tạo vài trang html để chuẩn bị build

Biên dịch code typescript

Thực hiện build code với webpack

Cài webpack và các module cần dùng

Tạo file cấu hình cho webpack

Thực hiện build code

Cài và sử dụng thư viện lodash

Build code với webpack cho 1 project đã có

BÀI VIẾT LIÊN QUANXEM THÊM

Module trong TypeScript

Decorator trong TypeScript

Generic trong TypeScript

BÀI VIẾT LIÊN QUAN XEM THÊM