5

[Cơ bản] React config với Webpack, Babel

đăng cách đây 11 tháng

Hẳn ai mới bắt đầu tiếp cận với React đều quá quen với CRA ( create-react-app) - một tool được phát triển để generate một project cơ bản và đầy đủ tính năng cho người mới bắt đầu học và đặc biệt là cho những web app đơn giản

Bản thân CRA cũng đã gợi ý nếu developer muốn vọc sâu để tự custom lại project thì sẽ chạy command npm run eject để "moi móc" hết config của CRA xem nó thế nào và kết quả là một mớ hỗn độn được show ra, nên thôi để tránh đau não tại sao chúng ta không tự config từ bước cơ bản , bản thân React cũng chỉ là một javascript library để render thôi mà :')

https://nextlint.com

Khởi động

Mình  sẽ bắt đầu chạy tuần tự những dòng lệnh bên dưới đây:

mkdir simple-react  -  Tạo thư mục để chứa code của bạn nào !

cd simple react - Di chuyển vào thư mục vừa tạo

mkdir public src - Tạo thư mục public để chứa file html và assets của bạn, thư mục src để chứa phần code chính

touch public/index.html src/app.js - Tạo file index.html để cho browser đọc , app.js sẽ khởi tạo phần code React trong này ( mình sẽ nói bên dưới )  
npm init -y -  Khởi tạo file package.json để quản lí đống packages mà bạn sẽ cài, cùng với đó là cài đặt các script cho việc dev và build

Và các bạn nhớ thêm vào nội dung cho file html ở trên nhá

Kết quả cây thư mục sẽ như thế này

https://nextlint.com

Cài React và Webpack

npm install --save react react-dom - Tất nhiên rồi !!!

npm install --save-dev  webpack webpack-cli webpack-dev-server - Cài đặt webpack để phục vụ việc đóng gói và đơn giản hoá source code của bạn , webpack-cli để run webpack trong command line, webpack-dev-server  để phục vụ live reloading code lúc dev (chỉ ở môi trường development), thường trong CRA bạn sẽ thấy lúc start có một port 3000 bật lên để live code và  update sau khi save code là thể loại này đấy :))

touch webpack.config.js - Khởi tạo file cấu hình cho webpack trong root của project  
Thêm nội dung này vào file config nhé :')

  • entry: là nơi truyền vào file thực thi đầu tiên của app để webpack đọc và đóng gói
  • output: là nơi xuất file bundle đã được đóng gói, các bạn cũng thấy trong file index.html cũng import script từ bundle vào, lúc này chúng ta quay lại bản chất của html và javascript thuần, easy chưa nào :')
  • devServer: là config cho server dev của chúng ta lúc code, có thể cấu hình về port, compress, ..v..v..

Tiếp tục thêm đoạn script bên dưới vào package.json

Ở đây các bạn có thấy là mình có tách biệt 2 mode development và production nghĩa là  môi trường bạn đang dev và môi trường code sẵn sàng chạy , webpack sẽ dựa vào hai mode này để đọc và đóng gói khác nhau, ở chế độ production thì code sẽ được tối ưu và lược bỏ hết những package, tool không cần thiết trong khi dev và ngược lại.

Được rồi , tiếp theo chúng ta vào phần code chính với React, lúc này mình sẽ vào file app.js trong folder src lúc nãy vừa tạo và thêm đoạn code này

Mình dùng hàm ReactDom.render để gán App của mình vào div với id là root đã được tạo trong file html. Lúc này chúng ta thử chạy lệnh npm start

Chắc chắn sẽ báo lỗi rồi vì chúng ta dùng JSX syntax của React mà Javascript lại không đọc được syntax này. Đừng lo lắng nhé, tiếp tục theo mình nào

Cài đặt và cấu hình Babel

Babel là một compiler giúp convert code ECMAScript 2015 trở lên về với code Javascript thuần tuý tương thích trên các trình duyệt cũ. Nào chạy lệnh này nhé 

npm install @babel/core babel-loader --save-dev  - Ở đây babel-loader là một webpack plugin để chỉ dẫn cho webpack chạy babel để compile files, @babel-core để babel được chạy như một tool dev
npm install @babel/preset-env @babel/preset-react - Ở đây @babel/preset-env để mình dùng được các syntax javascript mới nhất , @babel/preset-react để đọc syntax JSX của React

Tiếp tục mình tạo một file .babelrc ngoài root của project, liệt kê các presets cần dùng để thông dịch code

Giờ thì mình cần  vào webpack để cấu hình loader để webpack convert các file có JSX syntax và convert sang Javascript thuần

Ở đây mình thêm vào module/rules là babel-loader với syntax js và jsx để webpack có thể compile được syntax js và jsx, một phần nữa là resolve/extensions để webpack có thể truy xuất vào file .jsx để khi mình import một component nào đó vào không cần thêm đuôi .jsx  vào nữa, ví dụ để các bạn dễ hiểu

Thay vì

Mình chỉ cần thế này thôi

OK Rồi chạy npm start nào !!! Lúc này app của mình được live trên port 3000 rồi nhé :))

Cài đặt và rắc một tí Style vào 

Trước tiên chạy lệnh này để cài packages cần cho load style 

npm install css-loader style-loader --save-dev - Ở đây css-loader để cho webpack đọc được file css, style-loader để webpack lấy style vừa đọc được inject vào cây DOM dưới dạng <style> tag

Tiếp theo mình thử tạo một file là style.css trong thư mục src

Để mà webpack có thể hiểu và đọc được file extension .css này thì bạn cần thêm loader vào webpack và cấu hình cho nó hiểu

Quan trọng nhất là nhớ import file css này vào app.js nhé :))

Nếu các bạn muốn sử dụng SCSS , Styled-component thì cứ tải các package loader của nó về rồi thêm vào cấu hình webpack, ví dụ ở đây mình muốn dùng SCSS thì sẽ cấu hình như thế này

Và nhớ là cài packages bằng lệnh
npm install sass-loader node-sass --save-dev

Tại vì sass-loader yêu cầu phải cài thêm node-sass

OK Rồi các bạn thử npm start lại và thấy điều kì diệu nào !!

Bài viết đến đây là hết, còn nhiều thứ nữa để nói thêm nhưng mình để vào bài sau vì như thế này là đủ để các bạn thử viết một app cơ bản rồi

Chúc các bạn thành công !

Nguồn tham khảo :

#babel#reactjs#webpack#javascript
5
0
...