Tìm hiểu về nodemon và webpack cơ bản

1. Vấn đề 1: Nodemon là gì?
Ở bài trước giới thiệu về Babel chúng ta đã cùng nhau dựng 1 con server NodeJS bằng express rồi đúng không bực nỗi là mỗi lần bạn thay đồi code ở IDE và lưu lại thì khi ra trình duyệt F5 mỏi tay vẫn thấy nó trơ trơ cái mặt không thay đổi tý nào đúng không nào? Cách giải quyết là chúng lại phải F5 hẳn con server đó bằng cách Ctrl + C 2 lần ở cmd mà con server đó đang chạy. Việc này rất mất time phải không nào. Chính vì lý do đó chúng ta cần một module nữa giúp chúng ta làm công việc "refresh" lại server nhanh hơn, mạnh hơn. Ok đó chính là module nodemon mình muốn giới thiệu cho các bạn ngày hôm nay.

Các bạn đã hiểu công dụng của nodemon rồi chứ. Giờ chúng ta bắt đầu install thông qua npm bằng câu lệnh npm i -g nodemon ( các bạn chú ý là mình để nó -g có nghĩa là global nhé ). Ok giờ chúng ta option một chút trong file package.json một chút để nhét nodemon vào npm start khi khởi chạy project. Đây là nội dung chúng ta cần chỉnh sửa.

Ok. Giờ bạn start con server bằng npm start như bình thường nhé.

2. Vấn đề 2: Cái gì là webpack.
Ngày nay các website đang theo hướng web app với những đặc tính như:

Sử dụng JS ngày càng nhiều khi mà sức mạnh của nó cả bên server lẫn client là không phải bàn cãi.
Những browser ngày càng hỗ trợ những công nghệ mới khi mà tốc độ phát triển của công nghệ là nhanh chóng mặt.
Những tran full-page-reload ít đi thay vào đó là những trang SPA ( single page app ) được sử dụng ngày càng nhiều.

Chính vì những xu hướng trên đã tạo tiền đề cho một công cụ quản lí file một cách hiệu quả. Một trong số đó chính là Webpack - một công cụ rất mạnh để làm việc đó, mặc dù nó là một module bundler rất mới nhưng đã thực sự gây sốt gần đây. Ok giờ chúng ta đi tìm hiều về việc sử dụng nó ra sao nhé.

Để bắt đầu, chúng ta sẽ cài webpack bằng lệnh sau:

npm install webpack -g

Sau đó, tạo ra 2 file: index.html và app.js

app.js:

document.write('welcome to my app');
console.log('app loaded');

index.html

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Trong terminal, chúng ta chạy lệnh sau:

webpack ./app.js bundle.js

Lệnh trên webpack sẽ đọc vào file app.js và xuất ra file bundle.js cho chúng ta. Khá dễ dàng phải ko ?

Config

Config file trong webpack là nơi chưa tất cả các thiết lập, loader, plugin và các thông số khác về build mà bạn muốn xây dựng. Bạn hãy tạo file webpack.config.js trong thư mục gốc và thêm những dòng lệnh sau:

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

entry - tên của file hoặc một mảng những file mà chúng ta muốn include. Trong ví dụ này, chúng ta dùng 1 file duy nhất là app.js.

output - là một object chứa những thiết lập output. Trong ví dụ này, chúng ta chỉ ra filename là bundle.js là file mà chúng ta muốn Webpack build ra.

Bây giờ chúng ta hãy quay trở lại Terminal và gõ lệnh sau:

webpack

Khi tồn tại file webpack.config.js, webpack sẽ build dựa vào file config đó, mà không cần chúng ta phải chỉ rõ ra file input và file output mỗi khi gõ lệnh như ví dụ trước đó.

Watchmode

Hẳn mỗi lần bạn sửa file, bạn không muốn lại phải vào Terminal và chạy lại webpack để build ra file kết quả bạn mong muốn. Watchmode sẽ giúp bạn theo dõi files, và khi chúng có bất kì thay đổi nào, nó sẽ ngay lập tức build và xuất ra file output.

Có 2 cách để chạy watchmode.

Từ command line:

webpack --watch

Vào trong file config, thêm một key là watch và đặt nó là true

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
  watch: true
}

Sau khi đặt watch thành true, mỗi khi bạn chạy webpack, nó sẽ tự động rebuild file bulde mỗi khi có thay đổi.

Webpack loader và preloader

Loader cho phép bạn tiền xử lí một file khi bạn require hoặc load nó. Loader co1 thể transform file từ nhiều ngôn ngữ khác nhau như CoffeeScript sang Javascript. Loader thậm chí còn cho phép bạn require css file ngay trong Javascript.

Sau đây, chúng ta sẽ cài đặt và sử dụng loader babel. Trước khi có thể dùng được, chúng ta cần phải cài một số npm module trước.

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack  --save-dev

babel-core là package babel của npm
babel-loader là loader của babel cho webpack
babel-preset-es2015 là babel preset cho tất cả plugin của ES2015
babel-preset-react giúp transform code JSX của React thành Js
--save-dev lưu tất cả các module thành development dependencies.

Bây giờ để cài dặt babel transform code ES6, chúng ta cần chỉnh sửa webpack.config.js một chút. Đầu tiên là thêm một key là module,trong đó thêm mảng loaders, mỗi phần tử của mảng là config cho một loader. Sau đây chúng ta sẽ config cho babel-loader.

module.exports = {
 entry: "./app.js",
 output: {
   filename: "bundle.js"
 },
 module: {
   loaders: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       query: {
         presets: ['react', 'es2015']
       }
     }
   ]
 },
 resolve: {
   extensions: ['', '.js']
 },
}

Như các bạn có thể thấy ở trên, chúng ta thêm 3 key vào trong loader đầu tiên

test - là một regular expression dùng để kiểm tra những file nào sẽ được chạy loader. Trong ví dụ này, tất cả những file có extension là .js sẽ được chạy babel-loader.
exclude - những file mà loader sẽ loại bỏ (ignore). Chúng ta thêm node_modules vào đây.
loader - tên của loader chúng ta dủng (babel-loader)
query - Bạn có thể truyền options cho loader bằng cách viết chúng như những query string.
cacheDirectory - mặt định false. Khi được đặt, thư mục được chọn sẽ được sử dụng để cache kết quả từ loader.
presets chúng ta sẽ sử dụng react và es2015 đã được cài đặt

Chúng ta còn thêm key resolve dùng để chỉ ra những file nào có thể được xử lí mà không cần phải chỉ ra file extension. Giúp chúng ta có thể viết như này: