Cách thiết lập React bằng Webpack 4 và Babel 7
Một cách phổ biến để học React là sử dụng create-react-app , đây là một cách nhẹ nhàng để khởi động bất kỳ dự án React nào. Nhưng để đạt được một mục đích cụ thể, đôi khi cần phải cấu hình ứng dụng của bạn từ đầu. Trong hướng dẫn này, ta sẽ cài đặt React bằng cách sử dụng Webpack và Babel.Bước 1 - Cài đặt dự án
Trước khi bạn có thể bắt đầu, hãy đảm bảo đã cài đặt editor và terminal trên máy của bạn . Ngoài ra, bạn cần một version đã cài đặt của Node.js với npm . Đảm bảo đã cài đặt mọi thứ trước khi bạn tiếp tục đọc.
Trước khi bắt đầu viết bất kỳ mã nào, hãy tạo một folder mới nơi dự án của ta sẽ ở lại. Ở bất kỳ vị trí nào trên máy tính của bạn, hãy chạy như sau trong terminal của bạn:
- mkdir webpack-babel-react-starter
- cd webpack-babel-react-starter
Ta cần khởi tạo dự án của bạn bằng file package.json , vì ta sẽ cài đặt một số gói quan trọng cho quá trình cài đặt . Chạy như sau:
- yarn init -y
Lưu ý: Đối với hướng dẫn này, ta sẽ sử dụng sợi làm trình quản lý gói của ta . Nếu bạn đang sử dụng npm, hãy đảm bảo bạn chạy lệnh tương ứng.
Bước 2 - Cài đặt Webpack
Webpack là một trong những gói phổ biến nhất để phát triển web. Nó xây dựng nội bộ một biểu đồ phụ thuộc khi nó xử lý ứng dụng của bạn. Biểu đồ này ánh xạ mọi module mà dự án của bạn cần và tạo một hoặc nhiều gói. Kể từ version 4.0.0, webpack không yêu cầu file cấu hình để đóng gói dự án của bạn; tuy nhiên, nó có thể cấu hình để phù hợp hơn với nhu cầu của bạn.
Hãy cài đặt nó bằng lệnh:
- yarn add webpack --dev
Ta cũng cần cài đặt webpack CLI:
- yarn add webpack-cli --dev
Sau khi cài đặt hai gói này, bạn sẽ nhận thấy một phần bổ sung mới cho dự án của ta , phần node_modules và devDependencies trong file package.json của ta .
Điều tiếp theo cần làm là thêm webpack bạn vừa cài đặt vào file package.json .
"scripts": { "build": "webpack --mode production" } Đến đây, bạn không cần file cấu hình để bắt đầu.
Bước 3 - Cài đặt Babel
JavaScript hiện đại được viết bằng ES6 hoặc ES7, nhưng không phải trình duyệt nào cũng hiểu điều này. Ở đây ta cần babel để làm ánh sáng nặng cho ta . Babel là một chuỗi công cụ chủ yếu được sử dụng để chuyển đổi mã ECMAScript 2015+ thành version JavaScript tương thích ngược trong các trình duyệt hoặc môi trường hiện tại và cũ hơn. Xem tài liệu của Babel để biết thêm thông tin về những gì họ có thể làm cho bạn.
Các thành phần React hầu hết được viết bằng ES6, với khái niệm nhập khẩu, lớp và các tính năng khác của ES6 +, mà các trình duyệt cũ không hiểu được. Bản thân Webpack không biết cách chuyển đổi hoặc chuyển mã ES6 sang mã ES5. Nhưng nó có khái niệm về trình tải: trình tải gói web lấy thứ gì đó giống như đầu vào và tạo ra thứ khác làm kết quả .
Đối với cài đặt của ta , ta sẽ sử dụng babel-loader , là một trình tải gói web sẽ chuyển mã ES6 cho ta . Trước khi bắt đầu sử dụng babel-loader, ta cần cài đặt một số gói và cài đặt env đặt trước của babel, sẽ nhắm đến đến version JavaScript cụ thể mà ta muốn chuyển tải sang.
Hãy cài đặt tất cả các phụ thuộc:
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev Ta cũng cần cài đặt file cấu hình Babel của bạn , tạo file mới trong folder root có tên .babelrc và viết cấu hình sau vào file đó:
{ "presets": ["@babel/env", "@babel/react"] } Cấu hình này sẽ đảm bảo Babel chuyển mã React của ta , là JSX và bất kỳ mã ES6 + nào khác mà ta có thành mã ES5.
Tạo file webpack.config.js trong folder root và viết cấu hình sau cho file đó:
module.exports = { module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } } Đối với mọi file có phần mở rộng .js hoặc .jsx , ngoại trừ folder node_modules và nội dung của nó, Webpack sử dụng babel-loader để chuyển mã ES6 sang ES5.
Sau khi hoàn thành, hãy bắt đầu viết thành phần React của ta .
Bước 4 - Cài đặt React
Ta sẽ tạo một thành phần React hiển thị văn bản và một nút, nhưng để sử dụng React, ta cần cài đặt một số phụ thuộc: react và react-dom .
- yarn add react react-dom
Sau khi cài đặt chúng, hãy tạo một folder mới trong folder root . Hãy gọi nó là src và bên trong nó tạo một index.js .
Trong index.js , hãy viết mã sau:
import React from "react"; import ReactDOM from "react-dom"; const Index = () => { return ( <div className="full-screen"> <div> <h1> React Page {" "} </h1> <br /> <a className="button-line" href="https://github.com/deityhub" target="_blank" > Know more </a> </div> </div> ); }; export default Index; Đã đến lúc kiểm tra mọi thứ. Mở lại terminal của bạn và chạy:
yarn run build Bạn sẽ thấy một folder dist được tạo cho ta bởi Webpack và bên trong nó sẽ là một index.js , trong đó ta có một version rút gọn của mã ES5 của ta . Trong tập lệnh xây dựng của ta trong package.json , ta đã chỉ định cờ --mode production sau lệnh webpack ; điều này làm cho Webpack tạo một version rút gọn của mã ES5 của ta . Để xem định dạng có thể đọc được của mã đã được chuyển đổi, bạn có thể swap --mode production --mode development với --mode development .
Kết quả kết quả cho thấy mã của ta hoạt động, nhưng ta muốn mã đã chuyển của ta hiển thị trong trình duyệt của ta . Để làm điều này, hãy cài đặt HTML và CSS (SCSS) để hoạt động với Webpack.
Bước 5 - Kết nối Thành phần React với DOM
Ta cần cài đặt một file HTML để thành phần React của ta có thể được hiển thị trên DOM. Để làm điều này, ta cần cài đặt gói html-webpack-plugin :
- yarn add html-webpack-plugin --dev
Điều chỉnh file webpack.config.js của bạn trông giống như sau:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html") }) ] }; Ta đang điều chỉnh đầu vào và kết quả để ta có quyền kiểm soát nhiều hơn một chút đối với việc đặt tên và đích của các file của bạn .
Tiếp theo là tạo một file HTML bên trong folder src ; hãy gọi nó là index.html và sau đó thêm mã sau vào nó:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>React, Webpack, Babel Starter Pack</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <!-- your react app will render here --> <div id="app"></div> </body> </html> Vì ta đang ở trong folder src , hãy thực hiện một số điều chỉnh đối với thành phần React của ta . Đầu tiên, tạo một components folder mới, sau đó bên trong folder này thêm hai file app.js và app.scss . Thực hiện các điều chỉnh sau đối với mã của ta .
Trong ./src/index.js :
import React from "react"; import ReactDOM from "react-dom"; import App from "./components/app"; ReactDOM.render(<App />, document.getElementById("app")); Trong ./src/components/app.js
import React from "react"; import "./app.scss"; const App = () => { return ( <div className="full-screen"> <div> <h1> React Page {" "} </h1> <br /> <a className="button-line" href="https://github.com/deityhub" target="_blank" > Know more now </a> </div> </div> ); }; export default App; Trong ./src/components/app.scss :
body { background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1); background-size: 300% 300%; -webkit-animation: Background 25s ease infinite; -moz-animation: Background 25s ease infinite; animation: Background 25s ease infinite; } .full-screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; //you need to setup file-loader in webpack before you can use images background: url("../../assests/image/background.png"); background-size: cover; background-position: center; width: 100%; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; //_ works with row or column_ flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; } h1 { color: #fff; font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 4em; letter-spacing: -2px; text-align: center; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6); &:after { display: block; color: #fff; letter-spacing: 1px; font-family: "Poiret One", sans-serif; content: "React project powered by webpack and babel with support for sass"; font-size: 0.4em; text-align: center; } } .button-line { font-family: "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: 2px; background: transparent; border: 1px solid #fff; color: #fff; text-align: center; font-size: 1.4em; opacity: 0.8; padding: 20px 40px; text-decoration: none; transition: all 0.5s ease; margin: 0 auto; display: block; &:hover { opacity: 1; background-color: #fff; color: grey; } } @-webkit-keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes Background { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } Ta sẽ thêm một số kiểu ngoài thành phần HTML và React mà ta sẽ hiển thị trong DOM. Trước khi ta chạy mã của bạn để kiểm tra nó, ta cần cấu hình Webpack của bạn để nó biết cách xử lý bất kỳ .css hoặc .scss nào được chuyển qua nó.
- yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev
sass-loader đang được cài đặt ở đây được Webpack sử dụng để chuyển đổi .scss của ta thành file .css mà trình duyệt hiểu được và về mặt cơ bản, nó sử dụng node-sass để đạt được điều này. Sau đó, mini-css-extract-plugin tóm tắt tất cả các file CSS của ta thành một file CSS duy nhất, thay vì hành vi bình thường mà Webpack cung cấp, đó là gói file CSS của bạn với file kết quả .js cuối cùng, sau đó sẽ đưa CSS vào kết xuất kết quả HTML khi bạn chạy mã.
Mở file cấu hình Webpack của bạn và điều chỉnh mã của bạn trông giống như sau:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.(css|scss)$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html") }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] }; Lưu ý: Thứ tự của các bộ tải của bạn trong file cấu hình Webpack rất quan trọng, vì Webpack xử lý các bộ tải từ phải sang trái. Ví dụ: sử dụng thử nghiệm cho các file CSS, trước tiên sẽ chạy sass-loader , sau đó là css-loader và cuối cùng là MiniCssExtractPlugin .
Bây giờ ta hãy cài đặt web server pack dev. Điều này sẽ tạo một server phát triển cho ta và giám sát các file của ta để biết bất kỳ thay đổi nào trong quá trình phát triển.
- yarn add webpack-dev-server --dev
Sau đó, mở file package.json của bạn và thực hiện các điều chỉnh sau trong thẻ script của bạn:
"scripts": { "start": "webpack --mode development", "dev": "webpack-dev-server --mode development --open", "build": "webpack --mode production" } Hãy kiểm tra mã của ta bằng cách chạy nhà phát triển chạy yarn run dev .
Bạn sẽ thấy thông tin như thế này trong trình duyệt của bạn :
Bước 6 - Mở rộng tính năng
Bây giờ, hãy thêm hai tính năng nữa vào dự án này để chứng minh rằng bạn có thể mở rộng hoặc thêm nhiều tính năng hơn khi làm việc trên một dự án React nâng cao hơn thế này.
Mở terminal của bạn và cài đặt các gói sau:
- yarn add file-loader @babel/plugin-proposal-class-properties --dev
file-loader sẽ xử lý tất cả các tình huống mà ta muốn nhập hình ảnh hoặc SVG, trong khi @ babel / plugin-suggest-class-properties sẽ xử lý các thành phần lớp React và thuộc tính lớp tĩnh.
Trong webpack.config.js điều chỉnh nó để trông giống như sau:
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: path.join(__dirname, "src", "index.js"), output: { path: path.join(__dirname, "build"), filename: "bundle.js" }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.(css|scss)$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"] }, { test: /.(jpg|jpeg|png|gif|mp3|svg)$/, use: [ { loader: "file-loader", options: { name: "[path][name]-[hash:8].[ext]" } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html") }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] }; Trong file .babelrc , cũng điều chỉnh nó để trông giống như sau:
{ "presets": ["@babel/env", "@babel/react"], "plugins": ["@babel/plugin-proposal-class-properties"] } Cuối cùng, chạy máy phát triển yarn run dev đảm bảo mọi thứ đều hoạt động bình thường.
Kết luận
Với điều này làm cơ sở cho ứng dụng React của bạn, bạn có thể mở rộng cấu hình và xây dựng một cái gì đó từ nó. Nếu bạn gặp khó khăn, hãy xem liên kết GitHub để biết mã hoàn chỉnh.
Các tin liên quan
