Cấu hình Webpack và Babel 7 cho React

Tram Ho

Như chúng ta đã biết hiện nay làm việc với React hầu hết sử dụng đến create-react-app, một công cụ tuyệt vời giúp chúng ta chỉ cần tập trung vào React mà ít khi phải quan tâm đến việc chúng đã cấu hình ra sao. Sau một thời gian học React, mình nghĩ các bạn sẽ thắc mắc đến vấn đề đó. Vì vậy hôm nay chúng ta sẽ tìm hiểu cấu hình WebpackBabel 7 cho React.

Trước tiên, cùng tìm hiểu về WebpackBabel nhé !

👉 Webpack

Webpack là một module đóng gói giúp chúng ta đóng gói project của mình thành một file. Nó yêu cầu phải có một file config webpack.config.js nằm ở thư mục root của project, là nơi chúng ta sẽ cho webpack biết cách làm việc với project của mình bằng việc cung cấp thông tin đầu vào và đầu ra

entry là nơi mà ứng dụng của chúng ta sẽ bắt đầu và output là một đầu ra. Trong output chúng ta phải cung cấp một đường dẫn tương đối – nơi nó được tạo ra và tên của file đó.

👉 Babel

Babel là một trình biên dịch Javascript. Trên thực tế nó không phải là một function, nó sẽ không biên dịch bất cứ thứ gì theo mặc đinh, thay vào đó chúng ta sẽ cung cấp pluginspreset để nó có thể bổ trợ thêm các tính năng trong ngôn ngữ của bạn. Bạn có thể ghé thăm trang chủ của Babel để xem doc của nó. Ở trong website của babel bạn sẽ dễ dàng tìm thấy Try It Out, click vào đấy sẽ thấy cửa sổ như này

Ở cột bên trái nơi bạn sẽ viết code và cột phải các bạn sẽ thấy được code sau khi babel biên dịch, bây giờ chúng ta hãy viết một vài JSX vào cột trái nhé

Ở cột phải, ban sẽ thấy được code Javascript tường minh hơn, dễ hiểu hơn đúng không, và trình duyệt của bạn sẽ đọc được code này. Ở phía bên trái, bạn thấy một số tùy chọn PRESETS trong đó một số tùy chọn đã được đánh dấu. Nếu bây giờ bạn bỏ chọn tùy chọn này, bạn sẽ thấy lỗi do react-preset này chịu trách nhiệm chuyển đổi cú pháp JSX của chúng ta thành mã JavaScript.

Ở trong bài này chúng ta sẽ dùng 2 presets:

  1. babel/preset-env : Giúp babel chuyển đổi code ES6, ES7 và ES8 thành ES5.
  2. babel/preset-react : Giúp chuyển đổi JSX sang mã Javascript.

Chúng ta đã biết được sơ lược về webpackbabel rồi, giờ hãy đi cấu hình cho app React của bạn nào.

  • Tạo các thư mục với câu lệnh dưới

Chúng ta vừa thêm file index.html vào public. giờ thêm đoạn code html sau

  • Khởi tạo project với

  • Cài đặt Webpack và Babel

chúng ta đã cài webpack-cli vì vậy có thể dùng webpack trong command line. Chúng ta đã biết sẽ cần file cấu hình webpack ở thư mục root, tạo file webpack.config.js vơi code

Tiếp theo, thêm lệnh webpack ở file package.json

Sẽ có 2 mode, developproduction. ở production tệp output sẽ được tối ưu hoá để có thể hoạt động tốt nhất trên môi trường production

  • Cài đặt React

Bây giờ import react vào file app.js và thêm các dòng code sau

Bây giờ chạy dòng lênh npm start trong terminal và mở file index.html trong trình duyệt của bạn.

App của bạn hoạt động tốt đúng ko , nhưng ban sẽ thắc mắc tại sao không dùng JSX. Chúng ta cùng thử thêm JSX vào file app.js nka

Bây giờ chạy lại câu lệnh npm start

App chúng ta sẽ bị lỗi, bời chúng ta dùng JSX và Javacript không hỗ trợ JSX, vì vậy cần biên dịch JSX sang mã Javascript, đây là lúc dùng babel

  • Cài đăt và config babel

Chúng ta đã biết về @babel/preset-env @babel/preset-react

babel/core : Cho phép chạy công cụ babel giống như webpack

babel-loader : Là môt plugin. Nó cho webpack biết cách chạy babel khi webpack nhìn thấy một số tệp nhất định.

Tạo file config .babelrc vào thư mục root

File này sẽ khai báo những preset để babel có thể biên dịch.

Bây giờ chúng ta thêm đoạn code sau vào file webpack.config.js

  • Cài đặt Dev Server:

Thêm đoạn code sau vào file webpack.config.js

Thêm câu lệnh webpack-dev-server vào package.json

Cùng start nào

  • Load styles cho App

Thêm đoạn code css vào file styles.css

Để load được css bạn cần thêm rules mới trong webpack.config.js . Một số loader hỗ trợ đọc css

css-loader: Cho phép webpack load file css

style-loader: Đọc css và thêm vào thẻ <style>

Bây giờ thêm rules mới vào webpack.config.js

Import file styles.css vào app.js và chạy run dev-server để thấy thay đổi của css.

Như vậy chúng ta đã cấu hình WebpackBabel cho React, bạn có thể tạo project React của riêng mình. Bài viết còn nhiều thiêú sót, cảm ơn các bạn đã dành chút thời gian đã đọc bài viết này

Bài viết có tham khảo tại : Setup Webpack and Babel for React

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo