Documentation 1

naming-convention.md

Naming convention

Version 1.0
Date December 12, 2019

Tài liệu này cung cấp quy ước đặt tên biến, function, class, component,... trong JavaScript, TypeScript, React

Ưu điểm:

• Giảm thời gian để đọc hiểu code khi đọc lại code.
• Giúp tập trung vào các vấn đề quan trọng hơn thay vì quan tâm đến cách đặt tên.
• Tạo tính thông nhất trong một nhóm lập trình.
• Tăng tính thẫm mỹ và chuyên nghiệp.
• ...

Nguyên tắc chung:

• Không đặt tên có 1 ký tự (Trừ những trường hợp đặt biệt)
• Không viết tắt, tên quá ngắn sẽ gây khó hiểu khi xem lại code
• Đặt tên rõ nghĩa và đúng với chức năng
• Tên cần đúng ngữ pháp (quá khứ, hiện tại, bị động, chủ động, số ít hoặc số nhiều,...)

Variable

Tên biến được đặt theo kiểu CamelCase (In thường chữ đầu tiên và in hoa cho ký tự đầu tiên ở mỗi chữ tiếp theo)

Khi đặt tên biến sao cho có thể hiểu được chức năng của biến khi đọc tên biến, không cần phải có thêm sự mô tả nào cho biến

Ví dụ:

// bad
const firstname = 'Robin';
// bad
const first_name = 'Robin';
// bad
const FIRSTNAME = 'Robin';
// bad
const FIRST_NAME = 'Robin';
// good
const firstName = 'Robin';

Khi biến là global và không thay đổi trong suốt quá trình biên dịch: Viết hoa tất cả và các chữ cách nhau bới dấu gạch dưới _. Ví dụ:

const SECONDS = 60;
const MINUTES = 60;
const HOURS = 24;
const DAY = SECONDS * MINUTES * HOURS;

const DAYS_UNTIL_TOMORROW = 1;

Đối với các biến global nên tạo 1 file riêng chỉ để lưu các biến global (Nếu điều kiện cho phép)

Khi biến là kiểu boolean: thêm các tiền tố is, are, has,... vào phía trước tên biến. Ví dụ:

// bad
const visible = true;
// good
const isVisible = true;

// bad
const equal = false;
// good
const areEqual = false;

// bad
const encryption = true;
// good
const hasEncryption = true;

Khi biến là kiểu mảng: thêm hậu tố List vào sau tên biến. Ví dụ:

const deliveryNoteList = ["one", "two"];

Khi biến là kiểu function: thêm các hậu tố Function vào sau tên biến. Ví dụ:

// good example
const doSomethingFunction = function () { ... };

// bad example
const doSomething = function () { ... };

Function

Cách đặt tên hàm được đặt theo kiểu Camelcase

Không có khoảng trắng giữa tên function và dấu ngoặc đơn bên trái )

Có 1 space giữa dấu ngoặc đơn bên phải ( và dấu ngoặc nhọn bên trái }

Nội dung trong function được thụt vào 1 tab

Tùy vào chức năng của function mà thêm các tiền tố get, fetch, push, apply, calculate, compute hoặc post vào trước tên hàm

Thêm các tiền tố để có thể khái quát được chức năng của function. Ví dụ:

// bad
function name(firstName, lastName) {
  return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

Class Component

Tên component được đặt theo chuẩn PascalCase

Tên component phải thể hiện được chức năng của component đó

Tên component phải rõ ràng và duy nhất

Cách đặt tên component dựa trên path-based-component-naming (Tên component tương ứng với đường dẫn component hoặc src đến file component). Ví dụ:

Ví dụ:

• Đường dẫn components/User/List.ts tên component là UserList
• Đường dẫn /User/Form/Form.ts tên component UserForm
• Đường dẫn src/screens/User/List tên component ScreenUserList

Ưu điểm: Khi nhìn vào đường dẫn có thể khái quát được tên component hoặc ngược lại

Nhóm các thành phần vào cùng 1 folder theo module hoặc tính năng

Quy tắt đặt tên file

Đặt tên file theo kiểu PascalCase đối với frontend

Đặt tên file theo kiểu kebab-case đối với backend (In thường và các chữ cách nhau bởi dấu gạch ngang -)

Ví dụ:

// Frontend
- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js

// Backend
- routing/
--- user-route.js
--- messages-route.js

Quy tắt commit

Format commit

type(<scope-optional >): <Subject> #<github-ref-id>

<body-optional >

<footer-optional >

Type:

Loại type	Mô tả
feat	Thêm một tính năng, setting mới
fix	Sửa lỗi
docs	Thay đổi, thêm tài liệu
style	Thay đổi không làm ảnh hưởng đến code: khoảng trắng, định dạng, dấu chấm phẩy bị thiếu
refactor	Cập nhật lại nội dung nhưng không làm thay đổi chức năng, tính năng
chore	Những thay đổi khác mà không làm thay đổi đường dẫn, tên file, nội dung file
perf	Thay đổi giúp cải thiện hiệu xuất
revert	Revert lại một commit trước đó
test	Thêm các file test
build	Thay đổi ảnh hưởng đến hệ thống hoặc có liên quan đến các yếu tố bên ngoài
ci	Thay đổi tập tin hoặc cấu hình tích hợp, ví dụ: Travis, Circle CI

Example scope: ui, cli, api, touchswipe, qtime, etc.

Body:

• Bắt buộc sử dụng thì hiện tại, ví dụ: chỉ sử dụng change, không được sử dụng changed hoặc changes
• Nội dung giải thích cho sự thay đổi

Foolter:

• Mô tả sự thay đổi
• Chứng minh sự thay đổi là đúng
• Chi tiết nội dung thay đổi

Ví dụ:

STT	Ví dụ
1	feat: allow provided config object to extend other configs BREAKING CHANGE: extends key in config file is now used for extending other config files
2	refactor!: drop support for Node 6
3	docs: correct spelling of CHANGELOG
4	feat(lang): add polish language

Preference

• Javascript naming conventions
• React component naming conventions
• Commit conventions

react.md

React

React là một thư viện Javascript dùng để xây dựng giao diện người dùng, React cho phép nhúng code html trong code Javascript nhờ vào JSX

Component đầu tiên

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

JSX là gì?

JSX là một cú pháp mở rộng dành cho ngôn ngữ Javascript, JSX cung cấp cú pháp để thay thế lệnh React.createElement() trong React. Ví dụ cú pháp trong JSX:

const element = <h1 className="greeting">Hello, world!</h1>;

Do JSX gần gủi với Javascript hơn HTML, nên React DOM sử dụng camelCase để đặt tên các thuộc tính thay vì sử dụng các tên thuộc tính trong HTML.
Ví dụ:
class -> className trong JSX
tabindex -> tabIndex trong JSX
for -> htmlFor trong JSX

React DOM

React DOM là một thư viện Javascript để hỗ trợ cho việc cập nhật thay đổi. Cú pháp render element

ReactDOM.render(
  element,
  container,
  [callback]
)

Component và Props

Component là một đơn vị bố cục với giao diện được quy định chức năng rõ ràng và có thể tái sử dụng.

Props là một thuộc tính truyền từ bên ngoài vào components.

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

State and Lifecycle

State là thành phần của components.

this.setState() để update các thành phần trong state.

this.state để nhận dữ liệu trong state.

React sẽ render lại sau mỗi lần set State.

componentDidMount được gọi sau khi component được render trên client side

componentWillUnmount được gọi khi muốn unmount 1 component (Tương tự như clear set interval)

class Clock extends React.Component {
    
    timerID: number;

    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

Demo

References

• React

typescript.md

TYPESCRIPT

Version 3.7
November 2019

Typescript là một ngôn ngữ mã nguồn mở miễn phí hiện đang được phát triển và bảo trì bởi Microsoft. Nó là tập cha của JavaScript, với các bổ sung các tuỳ chọn kiểu tĩnh và lớp trên cơ sở lập trình hướng đối tượng cho ngôn ngữ này

Types

Boolean

Giá trị true hoặc false được gọi là boolean

Cách khai báo

let isDone: boolean = false;

Number

Tương tự như Javascript, number trong TypeScript là các giá trị có dấu phẩy động. Ngoài các số thập lục phân, thập phân, TypeScript còn hỗ trợ số nhị phân và bát phân

Cách khai báo

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

TypeScript sử dụng dấu nháy kép "", dấu nháy đơn '' và dấu backtick `` để bao quanh dữ liệu chuỗi

Cách khai báo

let color: string = "blue";
color = 'red';
let sentence: string = `Hello, my name is ${ fullName }`.

Array

Có 2 cách để khai báo kiểu mảng

Cách 1

let list: number[] = [1, 2, 3];

Cách 2

let list: Array<number> = [1, 2, 3];

Tuple

Tuple dùng để khai báo kiểu dữ liệu mạng với số phần tử cố định và có thể xác định kiểu dữ liệu của các phần tử trong mảng

Cách khai báo

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error

Enum

Thứ tự phần tử đầu tiên mặc định bắt đầu từ 0 và tăng dần 1 đơn vị

Cách khai báo

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Enum hỗ trợ gán số thứ tự vào phần tử khi cần thay đổi, ví dụ:

enum Color {Red = 1, Green, Blue}
enum Color {Red = 1, Green = 2, Blue = 4}

Any

Sử dụng any khi cần khai báo kiểu dữ liệu cho biến, nhưng chưa biết trước được kiểu dữ liệu đó là gì. Hoặc không quan tâm đến kiểu dữ liệu đó là gì

Cách khai báo

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Void

Dùng để khai báo cho hàm không trả về giá trị

Ví dụ

function warnUser(): void {
    console.log("This is my warning message");
}

Null và undefined

Cách khai báo

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

Never

Never đại diện cho kiểu dữ liệu giá trị không bao giờ xảy ra

Never là kiểu trả về cho hàm luôn ném ngoại lệ hoặc kiểu không return về kết quả;

Ví dụ

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

Object

Kiểu Object để khai báo cho các kiểu không nguyên thủy, kiểu không phải là số, chuỗi, boolean, bigint, symbol.

Ví dụ

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK
create(undefined); // OK

create(42); // Error
create("string"); // Error
create(false); // Error

Type assertions

Type assertions có 2 cách khai báo

“angle-bracket”:

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

as-syntax khác:

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

Trong typescript, let được khuyết khích sử dụng thay cho var như trong Javascript

Interfaces

Interface cho phép định nghĩ thuộc tính là gì và phương thức là gì mà đối tượng cần để được thực thi (implement).

Cách khai báo

interface ten_bien {
    ten_bien: kieu_tra_ve;
}

Optional Properties

Biến có thể có truyền vào hoặc không cần truyền bằng cách thêm dấu ? vào sau tến biến

Khai báo

interface ten_bien {
    ten_bien?: kieu_tra_ve;
}

Readonly properties

Biến không cho phép chỉnh sửa sau khi biến được rán giá trị đầu tiên, chỉ cần thêm readonly vào trước tên biến

Khai báo

interface ten_bien {
    readonly ten_bien: kieu_tra_ve;
}

Extends

Có thể lồng khai báo biến vào với nhau

Cách khai báo

class Animal {
    name: string;
}
class Dog extends Animal {
    age: number;
}

const data: Dog = {name: 'Cat', age: 3}

Function

Trong TypeScript, ngoài các class, namespace và module thì các function vẫn đóng vai trò chính trong việc mô tả cách thực hiện. TypeScript cũng thêm một số khả năng mới cho các hàm JavaScript tiêu chuẩn để giúp chúng hoạt động dễ dàng hơn.

Function type

Kiểu trả về của function

Ví dụ

//Named function
function add(x: number, y: number): number {
    return x+y;
}

Function type có 2 phần:

• Kiểu giá trị đối số
• Kiểu kết quả trả về

Tùy chọn và tham số mặc định

Trong TypeScript, tất cả các tham số điều là option bằng cách thêm ? vào sau tên biến tham số, khi đó ta có thể không cần truyền thông số khi gọi hàm

Ví dụ

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");                  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

Khởi tạo tham số mặc định: Đặt giá trị mặc định cho tham số nếu tham số đó không được truyền giá trị, nếu tham số được truyền sẽ theo giá trị đó.

Ví dụ

let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams"); 

Lưu ý: nếu tham số: tùy chọn, mặc định cần đặt vào vị trí sau các tham số bắc buộc

Rest parameters

Khi các tham số là một nhóm hoặc không biết chính xác là có bao nhiêu tham số cần sử dụng. Rest parameters là một giải pháp

Rest parameters được coi là vô số các tham số tùy chọn. Khi truyền đối số cho tham số phần còn lại, có thể sử dụng bao nhiêu tùy ý; Thậm chí có thể vượt qua none. Trình biên dịch sẽ xây dựng một mảng các đối số được truyền vào với tên được đặt sau dấu 3 chấm (...), cho phép sử dụng nó trong hàm của mình.

Ví dụ

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

Class

Ví dụ class căn bản:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

Kế thừa (inheritance) class

Dùng extends để khai báo kế thừa class

super() dùng để class con gọi đến function của class cha

Ví dụ:

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

Public, private, và protected modifiers

Đối với class trong Typescript, nếu không có khai báo gì thêm, 1 property được mặc định coi như là public

Với private, property không thể bị gọi từ ngoài vào.

Với protected, nó giống với private với 1 ngoại lệ là các property này có thể được gọi tới từ bên trong lớp con kế thừa từ lớp cha.

Readonly modifier

Có thể tạo các thuộc tính chỉ cho phép đọc bằng cách sử dụng từ khóa readonly. Các thuộc tính readonly phải được khởi tạo tại khai báo của chúng hoặc trong hàm constructor.

Ví dụ:

class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // error! name is readonly

Các khái niệm

constructor() được gọi ngay sau khi khởi tạo class mới

super() sử dụng để gọi đến hàm constructor của class cha

super.move() gọi đến hàm move của class cha

Ví dụ:

class Animal {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }

    move(meters: number = 0): string {
        return this.name + " moved " + meters + "m.";
    }
}

class Snake extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(meters = 5): string {
        return super.move(meters);
    }
}

var ranLuc = new Snake("Ran Luc");
ranLuc.move();   // = Ran Luc moved 5 m.
ranLuc.move(34); // = Ran Luc moved 34 m.

Utility types

Utility types để tạo điều kiện chuyển đổi loại phổ biến

Partial<T>

Tạo kiểu dữ liệu tùy chọn của tất cả các thuộc tính trong T

Ví dụ

interface Todo {
    title: string;
    description: string;
}

function updateTodo(fieldsToUpdate: Partial<Todo>) {
    return { ...fieldsToUpdate };
}

// incorrect 
const todo1 = updateTodo({newtitle: 'Typescript'});

// correct
const todo1 = updateTodo({title: 'Typescript'});

const todo1 = updateTodo({description: 'Mã nguồn mở'});

const todo1 = updateTodo({title: 'Typescript', description: 'Mã nguồn mở'});

Readonly<T>

Kiểu dữ liệu được lấy từ tất cả các properties trong T, nhưng chỉ cho phép đọc

Ví dụ

interface Todo {
    title: string;
}

const todo: Readonly<Todo> = {
    title: 'Delete inactive users',
};

todo.title = 'Hello'; // Lỗi, không thể thay đổi, thuộc tính chỉ cho đọc

Readonly có chức năng tương tự như Object.freeze(Object)

const obj = {
   prop: 42
 };

 Object.freeze(obj);

 obj.prop = 33;
 // Throws an error in strict mode

 console.log(obj.prop);
 // expected output: 42

Recorde<K>

Xây dựng kiểu dữ liệu với một tập hợp các thuộc tính K loại T

Ví dụ

interface PageInfo {
    title: string;
}

type Page = 'home' | 'about' | 'contact';

const x: Record<Page, PageInfo> = {
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { title: 'home' },
}

Pick<T, K>

Xây dựng một kiểu dữ liệu bằng cách chọn tập hợp các thuộc tính K từ T

Ví dụ

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

// Correct
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

// Incorrect
const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
    description: 'Delete inactive users'
};

Omit<T,K>

Xây dựng kiểu dữ liệu bằng cách chọn tất cả các thuộc tính từ T và sau đó loại bỏ K

Ví dụ

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Omit<Todo, 'description'>;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
};

Omit ngược lại với Pick

Exclude<T,U>

Exclude tương tự như Omit, nhưng áp dụng cho kiểu dữ liệu. Xây dựng kiểu dữ liệu bằng cách loại trừ khỏi T tất cả các thuộc tính có thể gán cho U

Ví dụ

type T2 = Exclude<string | number | (() => void), Function>; // return number và string

// correct
const T1:T2 = 'dog';
// incorrect
const T1:T2 = true;

Extract<T, U>

Tạo kiểu dữ liệu bằng cách trích xuất từ T tất cả các thuộc tính có thể gán cho U

Ví dụ

type T1 = Extract<string | number | (() => void), Function>;  // () => void

// incorrect
const dataType: T1 = true;

// correct
const dataFunction: T1 = function ShowData() {
    console.log('Hello');
}

Extract ngược lại với Exclude

NonNullable<T>

Tạo kiệu dữ liệu từ T được loại bỏ null, undefined

Ví dụ

type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]

Parameters<T>

Tạo kiểu dữ liệu loại tuple bao gồm các loại tham số của hàm T

Ví dụ

declare function f1(arg: { a: number, b: string }): void

type T4 = Parameters<typeof f1>;  // { a: number, b: string }

ConstructorParameters<T>

ConstructorParameters cho phép trích xuất tất cả các kiểu tham số của hàm T. Nó tạo ra một kiểu tuple với tất cả các loại tham số (hoặc kiểu never nếu T không phải là hàm)

Ví dụ

type T0 = ConstructorParameters<ErrorConstructor>;  // [(string | undefined)?]
type T1 = ConstructorParameters<FunctionConstructor>;  // string[]
type T2 = ConstructorParameters<RegExpConstructor>;  // [string, (string | undefined)?]

ReturnType<T>

Tạo kiểu dữ liệu từ kiểu dữ liệu trả về từ hàm T

Ví dụ

declare function f1(): { a: number, b: string };
type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(<T>() => T)>;  // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;  // number[]
type T4 = ReturnType<typeof f1>;  // {a: number, b: string}

InstanceType<T>

Tạo một kiểu bao gồm kiểu thể hiện của kiểu hàm xây dựng T

Ví dụ

class C {
    x = 0;
    y = 0;
}

type T0 = InstanceType<typeof C>;  // C
type T1 = InstanceType<any>;  // any
type T2 = InstanceType<never>;  // any

Required<T>

Xây dựng một loại bao gồm tất cả các thuộc tính của T được đặt thành yêu cầu

Ví dụ

interface Props {
    a?: number;
    b?: string;
};

const obj: Props = { a: 5 }; // OK

const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing

ThisParameterType

Ví dụ

function toHex(this: Number) {
    return this.toString(16);
}

function numberToString(n: ThisParameterType<typeof toHex>) {
    return toHex.apply(n);
}

OmitThisParameter

Ví dụ

function toHex(this: Number) {
    return this.toString(16);
}

// The return type of `bind` is already using `OmitThisParameter`, this is just for demonstration.
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);

console.log(fiveToHex());

ThisType<T>

Ví dụ

// Compile with --noImplicitThis

type ObjectDescriptor<D, M> = {
    data?: D;
    methods?: M & ThisType<D & M>;  // Type of 'this' in methods is D & M
}

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
    let data: object = desc.data || {};
    let methods: object = desc.methods || {};
    return { ...data, ...methods } as D & M;
}

let obj = makeObject({
    data: { x: 0, y: 0 },
    methods: {
        moveBy(dx: number, dy: number) {
            this.x += dx;  // Strongly typed this
            this.y += dy;  // Strongly typed this
        }
    }
});

obj.x = 10;
obj.y = 20;
obj.moveBy(5, 5);

Preference

• TypeScript wiki
• TypeScript docs

webpack.md

WEBPACK

Version 4.20.2
Date December, 2019

Webpack là công cụ giúp gói gọn toàn bộ file mà nó có thể hỗ trợ

Ví dụ cấu hình Webpack

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
}

Cài đặt và run Webpack

Cài đặt

npm install --save-dev webpack

Run webpack

webpack

Các khái niệm

Entry

Entry chỉ ra file js cho webpack sử dụng để bundle

Giá trị mặc định ./src/index.js. Vẫn có thể thay đổi đường dẫn file hoặc thêm nhiều file khác

Cách khai báo: entry: string | [string]

Cú pháp single entry

module.exports = {
    entry: "./src/index.js",
}

Cú pháp object entry

module.exports = {
    entry: {
        index: "./src/index.js",
        lib: "./src/lib.js"
    },
}

Tìm hiểu thêm trong phần entry-points

Output

Output để khai báo tên và đường dẫn file đầu ra sau khi webpack bundle các file trong phần entry

Đường dẫn file mặc định ./dist/main.js cho file chính và ./dist/ cho các file khác

Có thể thay đổi đường dẫn file

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'), // output directory
        filename: "[name].js" // name of the generated bundle
    }
};

Đọc Output nếu cần biến thêm thông tin

Loader

Do Webpack chỉ hiểu được file loại JSON và Javascript, nên phải cần sử dụng đến loader

Loader cho phép webpack xử lý các loại file khác nhau

test Xác định loại tập tin được chuyển đổi

use xác định loader nào để chuyển đối

Cú pháp mẫu:

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Ý nghĩa: Khi webpack gặp loại file .txt trong câu lệnh request() hoặc import, webpack sẽ sử dụng rar-loader để chuyển đổi trước khi thực hiện câu lệnh

Xem loader để biết thêm chi tiết

Plugins

Plugins thực hiện các hành động hoặc các chức năng của người dùng trên compilation hoặc chunk

Cú pháp yêu cầu và sử dụng plugins

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

Ý nghĩa: html-webpack-plugin sẽ tạo ra file HTML trong ứng dụng bằng cách tự động thêm tất cả các bundles được tạo ra trong dự án

Xem thêm về list plugins

Mode

Mode giúp kích hoạt tối ưu hóa tích hợp sẵn của webpack tương ứng với từng môi trường

Giá trị mặc định là development

Cú pháp

module.exports = {
  mode: 'development'
}

Tùy chọn

development build nhanh hơn nhưng ít tối ưu hóa code

production tối ưu hơn nhưng build chậm hơn

none không sử dụng mode

Xem Mode để tìm thêm thông tin về mode

Browser Compatibility

Webpack hỗ trợ tất cả các trình duyệt tuân thủ ES5 (IE8 trở xuống không được hỗ trợ). Nhu cầu webpack Promise cho import() và require.ensure(). Nếu bạn muốn hỗ trợ các trình duyệt cũ hơn, bạn sẽ cần tải một polyfill trước khi sử dụng các biểu thức này.

Environment

Webpack chạy trên phiên bản Node.js 8.0 hoặc cao hơn

Preference

• Webpack
• Webpack - Một số khái niệm