Cài đặt React, Webpack 4 và Babel (2018)

HTML/CSS

1. Cài đặt Project

Đầu tiên chúng ta tạo một thư mục cho project

Tiếp theo tạo một thư mục src ở trong thư mục vừa tạo ở trên

Khởi tạo dự án bằng cách chạy lệnh sau

2. Cài đặt Webpack

Để cài đặt webpack chúng ta chạy lênh sau

Với phiên bản V4 trở về sau của webpack, chúng ta cần cài đặt thêm module webpack-cli

Tiếp theo mở file package.json và cấu hình cho webpack như sau

3. Cài đặt babel

Trong react các component chủ yếu được viết bằng javascript ES6, hiện tại các trình duyệt hiện đại đã hỗ trợ ES6. Tuy nhiên một số phiên bản trình duyệt cũ và thấp hơn vẫn chưa hỗ trợ, chính vì thế chúng ta phải chuyển đổi các mã ES6 sang ES5, và babel là công cụ hỗ trợ chúng ta làm việc đấy.

Để sử dụng babel chúng ta cần cài đặt một số module sau đây:

  • Babel-loader: hướng dẫn babel làm thế nào để làm việc với webpack
  • Babel-core: lấy và phân tích mã, output ra một số file
  • Babel-preset-env: là bộ quy tắc để nói, giải thích với babel về cú pháp của ES6, ES7 cần tìm và làm thế nào để chuyển đổi về ES5
  • Babel-preset-react: chuyển đổi mã JSX (React JS) thành JS

Bắt đầu tiến hành cài đặt nào, để cài đặt chúng ta chạy lệnh sau

Tiếp đến tạo một file mới có tên .babelrc trong thư mục dự án và coppy đoạn mã sau vào

Đến đây chúng ta cần phải cấu hình cho webpack, tạo một file mới với tên webpack.config.js trong thư mục dự án và thêm mã cấu hình sau vào

4. Cài đặt React

 

Comments

comments