Cách thiết lập một dự án phản ứng với bưu kiện
Khi nói đến gói ứng dụng web, ParcelJS là một trình gói tương đối mới. Parcel tự mô tả mình là một gói ứng dụng web không cấu hình, nhanh như chớp.Parcel dựa trên tiền đề rằng việc xây dựng ứng dụng với các gói JavaScript có thể dễ dàng hơn. Webpack được cho là gói phổ biến nhất hiện nay, nó là một công cụ tuyệt vời cung cấp cho bạn sức mạnh của khả năng cấu hình nhưng đôi khi tất cả những gì bạn cần là một công cụ tối thiểu giúp bạn bắt đầu càng sớm càng tốt.
Đây là lúc Parcel xuất hiện. Nó tự chào mình như một công cụ gói nhanh với cấu hình bằng không — tất cả những gì bạn cần chỉ là trỏ nó vào điểm đầu vào của ứng dụng của bạn. Parcel cũng cung cấp các tính năng sau:
- Thời gian đóng gói nhanh - Bưu kiện có thời gian nhanh hơn đáng kể so với các công cụ đóng gói khác ngoài thị trường. Dưới đây là ảnh chụp màn hình của trang Bưu kiện trên Github .
- Gói nội dung - Parcel có hỗ trợ tuyệt vời cho JS, CSS, HTML, nội dung file .
- Tự động chuyển đổi - Tất cả mã của bạn được tự động chuyển đổi bằng Babel, PostCSS và PostHTML.
- Tách mã - Gói cho phép bạn tách gói kết quả của bạn bằng cách sử dụng cú pháp nhập động ().
- Thay thế module nóng (HMR) - Parcel tự động cập nhật các module trong trình duyệt khi bạn áp dụng các thay đổi trong quá trình phát triển, không cần cấu hình.
- Ghi log lỗi - Bưu kiện in các khung mã được đánh dấu cú pháp khi nó gặp lỗi để giúp bạn xác định chính xác vấn đề.
Một điều nữa cần lưu ý về Parcel là nó cho phép các nhà phát triển sử dụng index.html làm điểm nhập trái ngược với các module JS.
Trong hướng dẫn này, bạn sẽ cài đặt một ứng dụng web React với Parcel.
Bước 1 - Bắt đầu với bưu kiện
Để bắt đầu, hãy tạo một folder làm việc mới và cài đặt Parcel bằng cách chạy lệnh bên dưới trong terminal của bạn:
- npm install -g parcel-bundler
Điều tiếp theo cần làm là tạo một file package.json trong folder của bạn. Bạn có thể thực hiện việc này bằng cách chạy lệnh dưới đây:
- npm init -y
Điều đó tạo ra một package.json cho bạn.
Bưu kiện có thể lấy bất kỳ loại file nào làm điểm nhập của nó, nhưng file HTML hoặc JavaScript là một nơi tốt để tham khảo . Nếu bạn liên kết file JavaScript chính của bạn trong HTML bằng một đường dẫn tương đối, Parcel cũng sẽ xử lý nó cho bạn. Tạo các index.html và index.js và thêm nội dung sau vào chúng:
<html> <body> <script src="./index.js"></script> </body> </html> console.log("hello world"); Bây giờ các file đã được tạo, bạn đã sẵn sàng để chạy ứng dụng. Parcel đi kèm với một server phát triển được tích hợp trong đó sẽ tự động xây dựng lại ứng dụng của bạn khi bạn thay đổi file và hỗ trợ thay thế module nóng để phát triển nhanh. Để chạy ứng dụng, hãy chạy lệnh terminal bên dưới:
- parcel index.html
Đến đây bạn có thể mở http://localhost:1234/ trong trình duyệt của bạn và kiểm tra kết quả trong console . 
Bước 2 - Cài đặt một dự án với Parcel và React
Tiếp theo bạn sẽ cài đặt một dự án React với Parcel. Trước khi tiếp tục, bạn cần cài đặt một số phụ thuộc:
- npm i react
- npm i react-dom
Các phụ thuộc ở trên sẽ cài đặt React và react-dom trong ứng dụng của bạn. Vì React được viết bằng ES6, ta cần một cách để chuyển đổi mã. Parcel làm điều đó cho bạn mà không cần cấu hình. Tất cả những gì bạn phải làm là cài đặt các cài đặt trước và Parcel sẽ thực hiện công việc nặng nhọc cho bạn.
- npm i babel-preset-env babel-preset-react --save-dev
Sau khi hoàn tất, hãy tạo file .babelrc và chỉnh sửa nó như sau:
{ "presets": ["env", "react"] } Bây giờ Babel được cấu hình để chuyển đổi ES6 / ES7 JavaScript thành một gói JavaScript có ý nghĩa cho các trình duyệt.
Đến đây bạn có thể bắt đầu tạo ứng dụng React và các thành phần của nó. Mở index.html và thay thế bằng mã bên dưới.
<!DOCTYPE html> <html> <head> <title>React starter app</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> </head> <body> <div id="app"></div> <script src="./src/index.js"></script> </body> </html> Tiếp theo, tạo một folder có tiêu đề src và trong đó tạo một index.js và chỉnh sửa nó như sau:
import React from "react"; import ReactDOM from "react-dom"; import Header from './components/Header' class HelloMessage extends React.Component { render() { return <div> <Header/> <div className="container"> <h1>Hello {this.props.name}</h1> </div> </div> } } let App = document.getElementById("app"); ReactDOM.render(<HelloMessage name="Yomi" />, App); Đây là một ứng dụng bắt đầu React cơ bản. Thành phần HelloMessage sẽ được hiển thị trong index.html trong div với ID của app .
Tiếp theo, tạo một thành phần Header . Tạo một folder component và trong đó, tạo một file JS có tiêu đề Header.js và chỉnh sửa nó bằng mã bên dưới.
import React from 'react' import ParcelLogo from "../img/parcel-logo.svg"; const Header = () => ( <header> <nav className="navbar" role="navigation" aria-label="main navigation"> <div className="navbar-brand"> <a className="navbar-item" href="/"> <img width="120" src={ParcelLogo} alt=""/> </a> </div> </nav> </header> ) export default Header Parcel cũng hỗ trợ nhập nội dung như hình ảnh. Một điều cần lưu ý nữa là, Parcel cũng được hỗ trợ SCSS. Để sử dụng nó, hãy cài đặt node-sass :
- npm i node-sass
Khi bạn đã cài đặt node-sass , bạn có thể nhập các file SCSS từ các file JavaScript. Trong index.js của bạn, hãy thêm dòng mã bên dưới vào đầu file để nhập file SCSS:
import './scss/app.scss' ... Cũng hãy tạo file app.scss . Tạo một folder có tiêu đề scss và tạo một file có tiêu đề app.scss và chỉnh sửa nó như sau:
body { background-color: #fefefe; text-align: center; .navbar { background: #21374B; color: #E7DACB; height: 50px; } h1 { font-size: 40px; margin-top: 30px; } } Đến đây bạn đã hoàn tất việc cài đặt ứng dụng React, hãy chạy nó và xem nó có hoạt động không. Để làm điều đó, bạn cần khởi động server nhà phát triển và cấu hình package.json . Thêm dòng mã bên dưới vào file package.json :
"scripts": { "start": "parcel index.html" }, Điều này nghĩa là khi nào bạn chạy lệnh npm start , bạn đang yêu cầu Parcel khởi động một server phát triển bằng cách sử dụng index.html file mục nhập. Chạy lệnh npm start và bây giờ bạn có thể xem ứng dụng React tại http://localhost:1234 với hỗ trợ reload module nóng.
Bước 3 - Xây dựng để Sản xuất
Để chuẩn bị cho ứng dụng của bạn được production với Parcel, bạn cần chạy lệnh parcel build index.html . Thêm nó vào đối tượng scripts trong file package.json .
"scripts": { "start": "parcel index.html", "build": "parcel build index.html" }, Sau khi bạn chạy lệnh npm run build , Parcel sẽ tắt chế độ xem và thay thế module nóng, do đó nó sẽ chỉ xây dựng một lần. Nó cũng cho phép trình thu nhỏ cho tất cả các gói kết quả để giảm kích thước file . Lệnh build cũng cho phép chế độ production cũng đặt biến môi trường NODE_ENV=production .
Parcel cũng cung cấp cho bạn một số tùy chọn mà bạn có thể sử dụng để chọn cách ứng dụng của bạn được chuẩn bị cho chế độ production .
Nếu bạn muốn một folder khác cho Parcel để đưa các file production vào ( dist là folder mặc định), bạn có thể chỉ định điều đó bằng cách thêm --out-dir directory-name vào cuối khóa build trong package.json trông như thế này:
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --out-dir directory-name" }, Nếu bạn muốn tắt tính năng thu nhỏ là cài đặt mặc định, bạn có thể thực hiện việc đó bằng cách thêm --no-minify vào cuối khóa build trong package.json để nó trông giống như sau:
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --no-minify" }, Nếu bạn muốn tắt bộ nhớ đệm hệ thống file , bạn có thể thực hiện bằng cách thêm --no-cache vào cuối khóa build trong package.json để nó trông giống như sau:
"scripts": { "start": "parcel index.html", "build": "parcel build index.html --no-cache" }, Bạn có thể đọc thêm về các tùy chọn khác nhau tại đây .
Kết luận
Trong hướng dẫn này, bạn đã gói một ứng dụng web với Parcel. Bưu kiện vẫn còn tương đối mới và hỗ trợ của nó tiếp tục tăng về số lượng mỗi ngày. Trường hợp sử dụng của nó có thể khác với Webpack, nhưng nó là một công cụ gói có thể được xem xét trong quá trình phát triển web hàng ngày của bạn.
Bạn có thể xem repo Bưu kiện tại đây để xem các vấn đề và gửi PR.
Cơ sở mã cho hướng dẫn này có thể được tìm thấy trên GitHub .
Các tin liên quan
