Nội dung
- Cài đặt - Sử dụng - Babel và PostCSS - TypeScript

Thứ bảy, 09/12/2017 | 00:00 GMT+7

Gói ứng dụng web của bạn bằng bưu kiện

Parcel là một trình gói module mới ra mắt, cực kỳ nhanh và hỗ trợ các tài sản HTML, CSS, JavaScript, Hình ảnh và TypeScript ngay lập tức mà không cần các plugin riêng biệt. Hơn hết, không cần cấu hình và nó đơn giản như trỏ nó vào một file mục nhập và Parcel đảm nhận việc đóng gói, chuyển đổi và giảm thiểu nội dung.

Hãy cùng khám phá cách sử dụng Parcel.

Cài đặt

Tất cả những gì cần thiết để bắt đầu là gói gói bưu kiện . Cài đặt nó trên phạm vi global bằng npm hoặc Yarn:

$ npm i -g parcel-bundler

# or, using Yarn:
$ yarn global add parcel-bundler

Sử dụng

Đầu tiên, khởi tạo một dự án npm mới:

$ npm init

# or, using Yarn
$ yarn init

Tiếp theo, ta sẽ chứng minh cách sử dụng của Parcel với một ứng dụng demo rất đơn giản có chứa một index.html chính, hai file JavaScript và hai file CSS. Ứng dụng có hai nút thay đổi màu nền của trang khi nhấp vào.

Đây là nội dung của file HTML của ta :

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Color My World</title>

  <link rel="stylesheet" href="./styles.css">
</head>

<body>

  <div class="controls">
    <button id="color">Color!</button>
    <button id="premium-color">Premium color!</button>
  </div>

  <script src="./index.js"></script>
</body>

</html>

Lưu ý các đường dẫn ta sử dụng cho các file kiểu và tập lệnh là tương đối như thế nào. Điều này rất quan trọng để Parcel phát huy tác dụng của nó. Các nội dung khác như hình ảnh cũng nên được tham chiếu bằng đường dẫn tương đối.

Tệp JavaScript nhập của ta trông giống như sau:

index.js

'use strict';

import premiumColors from './premium';
const colorBtn = document.getElementById('color');
const premiumColorBtn = document.getElementById('premium-color');
const availableColors = [
  'aliceblue',
  'blanchedalmond',
  'darkorchid',
  'darkseagreen',
  'khaki',
  'lightblue'
];
colorBtn.addEventListener('click', () => {
  const randIdx = Math.floor(Math.random() * availableColors.length);
  document.documentElement.style.setProperty('--bg', availableColors[randIdx]);
});

Bạn sẽ nhận thấy rằng ta đang sử dụng các module ES6 ở đây, nhưng Parcel cũng hiểu cú pháp CommonJS. Tệp JavaScript thứ hai của ta chỉ chứa một file xuất mặc định với các màu cao cấp của ta :

premium.js

export default [
  'lightcoral',
  'moccasin',
  'cornflowerblue',
  'burlywood',
  'gainsboro',
  'ivory'
];

Tệp CSS chính của ta nhập một biểu định kiểu khác với các kiểu cho các node của ta và xác định các luật kiểu cho phần tử body và div .controls :

styles.css

@import './button.css';

body {
  background: var(--bg, paleturquoise);
  height: 100vh;
}

Và cuối cùng, các kiểu nút của ta thực sự đơn giản:

button.css

button {
  background: peachpuff;
  font-size: 1.3em;
  border: none;
  padding: .4em;
  margin: .3em;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.13);
}

Bưu kiện cũng hỗ trợ SASS, LESS và Bút cảm ứng ra khỏi hộp!

Với ứng dụng đơn giản của ta đã sẵn sàng, ta có thể gọi bưu kiện và trỏ nó đến index.html mục index.html :

$ parcel index.html

Parcel sẽ tạo các gói khác nhau trong folder a /dist , khởi động server local tại http://localhost:1234/ và bắt đầu lắng nghe các thay đổi.

Bạn cũng có thể chỉ định một folder kết quả khác bằng cách sử dụng --out-dir :

$ parcel index.html --out-dir public

Parcel cũng có lệnh watch để group và lắng nghe các thay đổi, nhưng không cần khởi động server local :

$ parcel watch index.html

Khi ứng dụng của bạn đã sẵn sàng để production , bạn có thể gói một bản dựng production bằng cách sử dụng lệnh build :

$ parcel build index.html

Điều này sẽ tắt Thay thế module nóng của Parcel và giảm thiểu nội dung JavaScript, CSS và HTML (sử dụng UglifyJS, cssnano và htmlnano).

Babel và PostCSS

Ngoài việc đóng gói, Parcel có thể thực hiện chuyển đổi mã bằng Babel, PostCSS và PostHTML.

Tất cả những gì bạn phải làm là thêm các phụ thuộc cần thiết và bao gồm các file cấu hình tương ứng ở folder root của dự án của bạn và Parcel sẽ lo phần còn lại.

Ví dụ: nếu bạn muốn sử dụng trình sửa lỗi tự động của PostCSS để tự động thêm tiền tố của nhà cung cấp, trước tiên hãy cài đặt gói:

$ npm install autoprefixer

# or, using Yarn:
$ yarn add autoprefixer

Và sau đó thêm file .postcssrc vào folder root của dự án của bạn:

.postcssrc

{
  "plugins": {
    "autoprefixer": true
  }
}

Và đó là nó! Bây giờ CSS này:

.controls {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 100%;
}

Sẽ được chuyển đổi thành:

.controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

Bạn cũng có thể xác định những trình duyệt để nhắm đến sử dụng Browserlist bằng cách thêm một file .browserslistrc để dự án của bạn.

TypeScript

Parcel thậm chí còn hỗ trợ TypeScript ra khỏi hộp. Đơn giản chỉ cần thêm typecript làm phụ thuộc nhà phát triển vào dự án của bạn:

$ npm i typescript --save-dev

# or, using Yarn:
$ yarn add typescript --dev

Sau đó, tạo thêm file tsconfig.json vào dự án của bạn. Ví dụ:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

Bây giờ, file index của bạn có thể trỏ trực tiếp vào file mục nhập TypeScript của bạn và bạn gọi parcel như bình thường và mã TypeScript sẽ tự động được chuyển sang mã JS:

index.html

...
<script src="./index.ts"></script>
...

$ parcel index.html

Hãy xem bài đăng này của ta để được trợ giúp thêm về cấu hình một dự án TypeScript mới.
Ngoài ra còn có một plugin TypeScript của bên thứ ba cho Parcel được gọi là parcel-plugin-typecript có tính năng kiểm tra kiểu và báo cáo lỗi có sẵn tại thời điểm xây dựng.

📦 Đến đây bạn sẽ bắt đầu tham gia các cuộc đua với cấu hình bằng không của Parcel, dễ sử dụng và tạo gói nhanh chóng! Để tìm hiểu thêm, hãy tham khảo tài liệu chính thức .

Tags:

Các tin liên quan

Tích hợp các thành phần web với ứng dụng Vue.js của bạn
2017-09-25
Cách làm việc với dữ liệu web bằng cách sử dụng yêu cầu và món súp đẹp mắt với Python 3
2017-07-14
Sử dụng Web worker một cách dễ dàng trong Vue.js với vue-worker
2017-05-16
Cách cài đặt Icinga và Icinga Web trên Ubuntu 16.04
2017-05-05
Cách lưu trữ nhiều trang web với Nginx và HAProxy bằng LXD trên Ubuntu 16.04
2017-04-19
Cách bảo mật ứng dụng web nông dân của bạn bằng Let's Encrypt trên Ubuntu 16.04
2017-03-29
Xây dựng các thành phần web gốc với Vue.js
2017-03-16
Cách sử dụng OpenResty Web Framework cho Nginx trên Ubuntu 16.04
2017-02-28
Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017
2017-02-23
Cách cài đặt Django Web Framework trên Debian 8
2016-12-21