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
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
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 -y0, ứng dụng sẽ hiển thị menu ngang
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"
}
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 -y0 bao gồm một vài hình ảnh, biểu định kiểu và mã JavaScript
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"
}
Dòng 7 là liên kết đến
$ npm init -y1
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"
}
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
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 -y2 đã 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
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"
}
$ npm init -y3 [dòng 13-17] để tải xuống gói
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"
}
$ npm init -y4 và plugin để phát triển
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"
}
Tại dòng 7, tập lệnh
$ npm init -y5 được thêm vào để khởi chạy Tổng số dựa trên cấu hình ở chế độ đồng hồ
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"
}
Dòng 14 là gói
$ npm init -y4
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"
}
Dòng 15 là plugin
$ npm init -y7, tải lại trực tiếp gói Tổng số
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"
}
Dòng 16 là plugin
$ npm init -y8, khởi động máy chủ phát triển cung cấp khả năng tải lại trực tiếp
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"
}
Vì tập lệnh
$ npm init -y5 dựa trên cấu hình Tổng số, nên cần có
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"
}
$ ls -R30 cho dự án
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Dòng 5 chỉ định mục nhập
$ ls -R31 là
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
$ ls -R32
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Dòng 7-14 cấu hình
$ ls -R33
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
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 -R34 để phục vụ các tệp từ
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Dòng 11 đặt trang dự phòng là
$ npm init -y0 [
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"
}
$ ls -R36] thay vì trang lỗi [
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
$ ls -R37]
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Dòng 12 và 13 thiết lập máy chủ phát triển thành
$ ls -R38
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Dòng 15 định cấu hình thư mục đồng hồ
$ ls -R39
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
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 -y30
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"
}
Dòng 19 chỉ định định dạng đầu ra là
$ npm init -y31. Đâ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
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"
}
Dòng 20 định cấu hình một tệp sơ đồ nguồn riêng biệt,
$ npm init -y32 sẽ được tạo. Bên cạnh giá trị boolean, nó cũng có thể được đặt thành
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"
}
$ npm init -y33
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"
}
Ngoài ra,
$ npm init -y34 có thể được kích hoạt động
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 -y2, hãy thay đổi tập lệnh thành
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"
}
$ ls -R3
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Sau đó, đầu ra có thể được đặt động
$ npm init -y3
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"
}
Dựa trên cấu hình Rollup này,
$ npm init -y30 sẽ được tạo. Chúng tôi sửa đổi
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"
}
$ npm init -y0 để bao gồm nó
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"
}
$ npm init -y3
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"
}
Tại thư mục gốc của dự án, hãy thực thi
$ npm init -y38. Dự án Tổng số đang hoạt động
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"
}
Đây là
$ ls -R32
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Đây là
$ npm init -y30 được tạo ra
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"
}
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 -y31 được đặt thành
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"
}
$ npm init -y33, bản đồ nguồn sẽ là một phần của
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"
}
$ npm init -y30
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"
}
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 -y34 [dòng 17-21], vào
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"
}
$ ls -R32
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Điều này được phản ánh trong
$ npm init -y30 được tạo ra
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"
}
Nếu chúng tôi nhận xét về việc sử dụng
$ npm init -y34 [dòng 16] trong
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"
}
$ ls -R32, thì
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
$ npm init -y30 được tạo sẽ không bao gồm
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"
}
$ npm init -y34
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"
}
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 -y71 và
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"
}
$ npm init -y72
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"
}
Trình cắm CSS
Chúng tôi đã bao gồm một biểu định kiểu trong
$ npm init -y0. Việc đưa vào có thể được thay thế bằng plugin Rollup,
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"
}
$ npm init -y74, cung cấp khả năng tích hợp liền mạch giữa Rollup và PostCSS
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"
}
Các gói,
$ npm init -y75 và
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"
}
$ npm init -y76, cần được đưa vào
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"
}
$ npm init -y2
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"
}
$ npm init -y7
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"
}
Thêm cấu hình
$ npm init -y76 vào
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"
}
$ ls -R30 [dòng 3 và dòng 8]
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Xóa liên kết
$ npm init -y1 khỏi
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"
}
$ npm init -y0
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"
}
$ npm init -y9
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"
}
Thay vào đó, hãy nhập
$ npm init -y1 đến
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"
}
$ ls -R32 [dòng 1]
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Sau đó, chúng tôi có
$ npm init -y30 được tạo sau đâ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"
}
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 -y0. Việc đưa vào có thể được thay thế bằng plugin Rollup,
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"
}
$ npm init -y96, cung cấp sự tiện lợi khi có sẵn hình ảnh khi khởi động
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"
}
Gói,
$ npm init -y97, cần được đưa vào
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"
}
$ npm init -y2
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"
}
$ npm init -y7
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"
}
Thêm cấu hình
$ npm init -y97 vào
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"
}
$ ls -R30 [dòng 4 và dòng 10]
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Điều chỉnh
$ npm init -y0 cho hình ảnh [dòng 10 và dòng 13]
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"
}
Nhập
$ npm init -y72 và
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"
}
$ npm init -y73 vào
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"
}
$ ls -R32 [dòng 2 và 3]
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
Sau đó, chúng tôi có
$ npm init -y30 được tạo sau đâ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"
}
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 -y76 là một plugin để thu nhỏ gói được tạo. Bạn nên rút gọn mã sản xuất
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"
}
$ npm init -y77 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
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"
}
Để 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 -y78
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"
}
$ npm init -y8
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"
}
Sau đó, chúng có thể được sử dụng trong
$ ls -R30
images index.html style.css./images:
flower.jpg hamburger.svg./src:
index.js
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