Làm cách nào để gộp CSS với rollup?

Question

Một plugin Rollup có mục đích duy nhất là thu thập tất cả các tệp CSS mà bạn nhập vào dự án của mình và gộp chúng vào một tệp CSS tuyệt vời duy nhất. Thật mới mẻ, nó giữ nguyên thứ tự các tệp CSS được nhập. Tỉnh táo, nó không tạo ra bản đồ nguồn

Nội dung chính Show

Cài đặt
Cách sử dụng
Làm cách nào để nhập CSS trong cuộn lên?
Rollup không được dùng nữa?
Gói tổng số là gì?
Bản tổng hợp toàn cầu là gì?

Cài đặt

Cách sử dụng

trong tổng số của bạn. cấu hình. tập tin js

import cssbundle from 'rollup-plugin-css-bundle';

export default {
    input: 'index.js',
    output: {
        file: 'dist/index.js',
        format: 'cjs'
    },
    plugins: [cssbundle()]
};

Giống như tất cả các plugin Rollup hoạt động tốt, cssbundle hỗ trợ các tùy chọn bao gồm và loại trừ để lọc các tệp mà plugin sẽ chạy trên đó

đầu ra. Chuỗi là một đường dẫn tùy chọn cho CSS được trích xuất;

biến đổi. Chức năng có sẵn để xử lý CSS, chẳng hạn như với postcss. Nó nhận một chuỗi chứa mã để xử lý làm tham số duy nhất và sẽ trả về mã đã xử lý. ví dụ

Rollup là gói mô-đun dành cho JavaScript để biên dịch các đoạn mã nhỏ thành thứ gì đó lớn hơn và phức tạp hơn, chẳng hạn như thư viện hoặc ứng dụng. Nó có hơn 19.000 sao trên GitHub và hơn 3 triệu lượt tải xuống hàng tuần từ sổ đăng ký npm

Đây là xu hướng npm cho các gói lớn trên thị trường

Hình ảnh của tác giả

Rollup là gói phổ biến thứ hai. Sự khôn ngoan thông thường là sử dụng webpack cho ứng dụng và sử dụng rollup cho thư viện. Ngày nay nó vẫn đúng. Tuy nhiên, khi webpack và rollup triển khai các tính năng của nhau, ranh giới giữa hai gói bị mờ

Tương tự như webpack, Rollup rất phức tạp, với đường cong học tập dốc. Hãy bắt đầu từ một ví dụ đơn giản để xây dựng dự án Rollup

Dự án HTML

Chúng tôi đã tạo một dự án HTML nhỏ cho các menu đáp ứng. Khi ứng dụng ở trên thiết bị di động, nó sẽ hiển thị các màn hình sau trong nhiều trường hợp

Lorem ipsum text on a mobile web page for a wiki-like entry on “Flower.”

Hình ảnh của tác giả

Màn hình bên trái là trang bắt đầu. Do nội dung dài hơn diện tích hiển thị nên chúng ta cần kéo xuống để xem nội dung còn lại (màn hình chính giữa). Khi nhấp vào menu hamburger ở góc trên cùng bên phải, nó sẽ hiển thị menu dọc (màn hình bên phải)

Khi ứng dụng ở trên màn hình nền với chiều rộng tối thiểu,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0, ứng dụng sẽ hiển thị menu ngang

On a desktop monitor, the webpage shows the navigation horizontally.

Hình ảnh của tác giả

Mã nguồn được đặt tại kho lưu trữ GitHub này và sau đây là cấu trúc thư mục

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

Đây là một dự án HTML điển hình với

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0 bao gồm một vài hình ảnh, biểu định kiểu và mã JavaScript

Dòng 7 là liên kết đến

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1

Dòng 8 bao gồm mã JavaScript

Dòng 14 là hoa JPG

Dòng 17 là hamburger SVG, được hiển thị trên màn hình hẹp

Dự án có thể được khởi chạy với máy chủ trực tiếp của VSCode

Launching in VSCode.

Hình ảnh của tác giả

Rollup với tải trực tiếp

Cần có một gói mô-đun để biên dịch các đoạn mã JavaScript nhỏ cùng với biểu định kiểu và hình ảnh thành một thứ gì đó lớn hơn và phức tạp hơn, chẳng hạn như thư viện hoặc ứng dụng. Chúng tôi sử dụng Rollup để đóng gói một dự án JavaScript. Điều đầu tiên là làm cho dự án npm được quản lý

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Trong

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2 đã tạo, hãy thêm tập lệnh (dòng 7) để chạy lệnh Tổng số. Ngoài ra, hãy tạo phần

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3 (dòng 13-17) để tải xuống gói

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4 và plugin để phát triển

Tại dòng 7, tập lệnh

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5 được thêm vào để khởi chạy Tổng số dựa trên cấu hình ở chế độ đồng hồ

Dòng 14 là gói

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4

Dòng 15 là plugin

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7, tải lại trực tiếp gói Tổng số

Dòng 16 là plugin

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

8, khởi động máy chủ phát triển cung cấp khả năng tải lại trực tiếp

Vì tập lệnh

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5 dựa trên cấu hình Tổng số, nên cần có

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

30 cho dự án

Dòng 5 chỉ định mục nhập

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

31 là

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32

Dòng 7-14 cấu hình

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

33

Dòng 8 đặt khởi chạy ở chế độ trình duyệt

Dòng 9 cho phép đầu ra dài dòng trên bảng điều khiển

Dòng 10 chỉ định các thư mục, thư mục hiện tại và

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

34 để phục vụ các tệp từ

Dòng 11 đặt trang dự phòng là

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0 (

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

36) thay vì trang lỗi (

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

37)

Dòng 12 và 13 thiết lập máy chủ phát triển thành

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

38

Dòng 15 định cấu hình thư mục đồng hồ

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

39

Dòng 17-21 xác định vị trí và định dạng của đối tượng đầu ra

Dòng 18 chỉ định tệp đầu ra là

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30

Dòng 19 chỉ định định dạng đầu ra là

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

31. Đây là định dạng biểu thức hàm được gọi ngay lập tức (IIFE), được giải thích trong một bài viết khác

Dòng 20 định cấu hình một tệp sơ đồ nguồn riêng biệt,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

32 sẽ được tạo. Bên cạnh giá trị boolean, nó cũng có thể được đặt thành

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

33

Ngoài ra,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

34 có thể được kích hoạt động

Trong

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2, hãy thay đổi tập lệnh thành

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

3

Sau đó, đầu ra có thể được đặt động

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3

Dựa trên cấu hình Rollup này,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 sẽ được tạo. Chúng tôi sửa đổi

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0 để bao gồm nó

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3

Tại thư mục gốc của dự án, hãy thực thi

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

38. Dự án Tổng số đang hoạt động

Đây là

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32

Đây là

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 được tạo ra

Dòng 1 là tập lệnh tải trực tiếp

Dòng 2-20 xác định IIFE

Dòng 21 là liên kết đến sourcemap. Nếu

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

31 được đặt thành

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

33, bản đồ nguồn sẽ là một phần của

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30

rung cây

Rung cây là một kỹ thuật tối ưu hóa mã. Bằng cách phân tích mã, Tổng số chỉ bao gồm nguồn cần thiết để chạy thư viện hoặc ứng dụng

Hãy thêm một hàm,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

34 (dòng 17-21), vào

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32

Điều này được phản ánh trong

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 được tạo ra

Nếu chúng tôi nhận xét về việc sử dụng

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

34 (dòng 16) trong

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32, thì

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 được tạo sẽ không bao gồm

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

34

Rung cây là tính năng đặc trưng của Rollup. Nó cho phép Rollup tạo một gói nhỏ hơn, nhanh hơn. Nó dựa trên cấu trúc tĩnh của cú pháp mô-đun ES2015 — e. g. ,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

71 và

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

72

Trình cắm CSS

Chúng tôi đã bao gồm một biểu định kiểu trong

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0. Việc đưa vào có thể được thay thế bằng plugin Rollup,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

74, cung cấp khả năng tích hợp liền mạch giữa Rollup và PostCSS

Các gói,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

75 và

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

76, cần được đưa vào

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7

Thêm cấu hình

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

76 vào

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

30 (dòng 3 và dòng 8)

Xóa liên kết

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1 khỏi

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

9

Thay vào đó, hãy nhập

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1 đến

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32 (dòng 1)

Sau đó, chúng tôi có

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 được tạo sau đây

Các dòng 2-30 xác định một chức năng để thêm biểu định kiểu vào tệp HTML,

Dòng 32 ghi lại tất cả nội dung biểu định kiểu

Dòng 33 gọi hàm để chèn biểu định kiểu

Plugin hình ảnh

Chúng tôi đã bao gồm hai hình ảnh trong

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0. Việc đưa vào có thể được thay thế bằng plugin Rollup,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

96, cung cấp sự tiện lợi khi có sẵn hình ảnh khi khởi động

Gói,

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

97, cần được đưa vào

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7

Thêm cấu hình

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

97 vào

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

30 (dòng 4 và dòng 10)

Điều chỉnh

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

0 cho hình ảnh (dòng 10 và dòng 13)

Nhập

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

72 và

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

73 vào

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

32 (dòng 2 và 3)

Sau đó, chúng tôi có

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

30 được tạo sau đây

Dòng 35 là JPG hoa dùng ở dòng 41

Dòng 37 là tệp SVG hamburger, được sử dụng ở dòng 43

Plugin Terser và Cleaner

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

76 là một plugin để thu nhỏ gói được tạo. Bạn nên rút gọn mã sản xuất

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

77 là một plugin để dọn dẹp các thư mục trước khi xây dựng lại. Bạn nên dọn dẹp thư mục

Để sử dụng hai plugin này, các gói sau cần phải là một phần của

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

78

$ npm init -y
Wrote to /Users/fuje/rollup-example/package.json:{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

8

Sau đó, chúng có thể được sử dụng trong

$ ls -R
images     index.html style.css./images:
flower.jpg    hamburger.svg./src:
index.js

30

Phần kết luận

Rollup là trình đóng gói phổ biến thứ hai và nó đặc biệt tốt trong việc đóng gói các thư viện

Chúng tôi đã giới thiệu sáu plugin. Mã cuối cùng được chụp tại kho lưu trữ này

Có một danh sách dài các plugin để mở rộng chức năng của Rollup. Ngoài ra, bạn có thể thử tạo các plugin của riêng mình

Cho đến nay, Rollup hoạt động tốt cho các dự án của chúng tôi. webpack và Rollup là đối thủ của nhau. Hy vọng rằng song đấu sẽ mang lại cho chúng ta nhiều tính năng và hiệu quả hơn trong tương lai

Làm cách nào để nhập CSS trong cuộn lên?

nhập css từ "rollup-plugin-import-css"; . "mục lục. js", đầu ra. { tập tin. "dist/chỉ mục. js", định dạng. "esm" }, plugin. [ css() ] }; Thao tác này sẽ gộp tất cả các tệp css đã nhập vào một tệp css duy nhất cũng như làm cho các tệp css có thể truy cập được dưới dạng tệp xuất mặc định.

Rollup không được dùng nữa?

Gói này không được dùng nữa và không còn được duy trì . Vui lòng sử dụng @rollup/plugin-commonjs.

Gói tổng số là gì?

Rollup là một gói mô-đun dành cho JavaScript để biên dịch các đoạn mã nhỏ thành thứ gì đó lớn hơn và phức tạp hơn, chẳng hạn như thư viện hoặc ứng dụng . Nó sử dụng định dạng chuẩn hóa mới cho các mô-đun mã có trong bản sửa đổi ES6 của JavaScript, thay vì các giải pháp mang phong cách riêng trước đây như CommonJS và AMD.

Bản tổng hợp toàn cầu là gì?

Tổng số gói nhiều tệp sử dụng các câu lệnh nhập và xuất thành một tập lệnh không còn chứa bất kỳ câu lệnh nhập nào nữa mà chứa tất cả mã JS cần để hoạt động (được sao chép ít nhiều từ các tệp khác) hoặc "tải" tệp . Tất cả các phản ứng

programming css

Làm cách nào để gộp CSS với rollup?

Cài đặt

Cách sử dụng

Làm cách nào để nhập CSS trong cuộn lên?

Rollup không được dùng nữa?

Gói tổng số là gì?

Bản tổng hợp toàn cầu là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội