Nhập scss cuộn lên

Có thể chúng ta đã rất quen thuộc với Webpack - một gói mô-đun được sử dụng rất nhiều trong việc xây dựng ứng dụng JavaScript. Rollup cũng vậy, nó là một module bundler dành cho JavaScript. Có tác dụng đóng gói các phần mã nhỏ thành một gói. Bạn có thể xem hình minh họa bên dưới để hiểu bản chất của module bundler

Nguồn. freecodecamp. tổ chức

2. Cài đặt

Toàn cầu

$ npm install -g rollup

Sau khi cài đặt, các bạn có thể gõ

$ rollup main.js --file bundle.js --format iife --name hello

7 trên dòng lệnh để xem các tùy chọn đó, tham số mà

$ rollup main.js --file bundle.js --format iife --name hello

8 hỗ trợ

Bây giờ chúng ta sẽ thử gói một ví dụ nhỏ sau để xem cách Rollup hoặc động

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

Đoạn mã trên sẽ xuất một hàm

$ rollup main.js --file bundle.js --format iife --name hello

9, kết quả trả về là

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

0

Chúng ta sẽ xây dựng thử với Rollup

$ rollup main.js --file bundle.js --format iife --name hello

Sau khi build, file

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

1 của chúng ta sẽ như sau

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

Mình sẽ bao gồm file

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

1 và hàm

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

3

$ rollup main.js --file bundle.js --format iife --name hello

1

Kết quả console on output output của trình duyệt

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

4

Kết quả như mong muốn. tada

Và đương nhiên nếu bạn bao gồm

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

5 thì trình duyệt sẽ thông báo lỗi vì nó không hiểu được

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

6

xin chào không được xác định

Địa phương

Trong trường hợp bạn không muốn sử dụng lệnh

$ rollup main.js --file bundle.js --format iife --name hello

8 toàn cầu, thì có thể cài đặt cục bộ và chỉ sử dụng được trong phạm vi của dự án

$ rollup main.js --file bundle.js --format iife --name hello

6

Sau khi cài đặt, bạn có thể sử dụng giống như toàn cầu. Nhưng lúc này bạn phải khai báo Rollup trong npm scripts hoặc sử dụng lệnh npx

$ rollup main.js --file bundle.js --format iife --name hello

7

3. Định dạng tổng số

Rollup support chung ta bundle code back with many format as. amd, cjs, esm, iife, umd. Đây chính là sức mạnh để Rollup được sử dụng trong quá trình xây dựng thư viện có thể chạy trên nhiều môi trường như Node. js, trình duyệt, ES

Như ví dụ trên, mình đã bundle code lại với định dạng là iife để có thể chạy trên môi trường trình duyệt

Để gói mã với các định dạng khác nhau, các bạn có thể sử dụng cờ

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

8

$ rollup main.js --file bundle.js --format iife --name hello

9

Để hiểu về các định dạng. amd, cjs, esm, iife, umd. Bạn có thể đọc bài viết JAVASCRIPT. CJS, AMD, UMD và ESM là cái quái gì vậy? . đến

4. plugin tổng số

Việc sử dụng một plugin hỗ trợ bundler là điều rất cần thiết, bởi vì một bundler không thể tích hợp tất cả mọi thứ định dạng tích hợp sẵn và cũng không phải ai cũng muốn sử dụng các tính năng giống nhau. Vì vậy việc sử dụng plugin sẽ rất linh hoạt và có khả năng mở rộng đối với những ứng dụng / thư viện phức tạp

Rollup hỗ trợ rất nhiều plugin ví dụ như transpile ES6/7 -> ES5, compile CSS preprocessor, minify JS,…

Mình sẽ lấy một ví dụ sử dụng plugin rollup-plugin-babel để chuyển code JS dạng ES6 thành ES5

Chúng ta tiếp tục sử dụng ví dụ đầu tiên. Nhưng bây giờ trong file

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

5 sẽ được viết lại một chút, sử dụng cú pháp spead trong ES6

$ rollup main.js --file bundle.js --format iife --name hello

1

If not used plugin to transpile ES6 -> ES5, thì file

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

1 after build will as after

$ rollup main.js --file bundle.js --format iife --name hello

3

You see that. mã vẫn như vậy, điều này sẽ khiến cú pháp lây lan của trình duyệt không hỗ trợ báo cáo lỗi. Chúng ta sẽ chỉnh sửa lại bằng cách cài đặt thêm plugin babel

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

0

Units must not any. Tiếp theo các script bạn khai báo trong

$ rollup main.js --file bundle.js --format iife --name hello

11

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

1

Rollup sẽ tự động phát hiện tệp

$ rollup main.js --file bundle.js --format iife --name hello

12 trong thư mục gốc nếu bạn không truyền đường dẫn tới tệp cấu hình cho

$ rollup main.js --file bundle.js --format iife --name hello

13

Trường hợp bạn muốn dùng nhiều file config cho các ngữ cảnh khác nhau thì có thể khai báo như sau

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

2

Sau khi build với plugin babel. Chúng ta sẽ được tập tin

var hello = (function() {
  'use strict';

  const hello = function(name) {
    return 'Hello ' + name
  };

  return hello;
})();

1 như sau

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

3

nhìn code sau khi bundle, mình nhận ra JavaScript như một vũ trụ bao la 😂

And results in console of the browser

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

4

6. Viết thư viện

Sau khi đã tìm hiểu các khái niệm về Rollup như dòng lệnh, tệp cấu hình, định dạng, plugin. Chúng ta sẽ áp dụng ứng dụng Rollup để xây dựng một thư viện nhỏ có chức năng đảo ngược văn bản. Mình đặt tên thư viện là

$ rollup main.js --file bundle.js --format iife --name hello

15 (thêm 1 chữ

$ rollup main.js --file bundle.js --format iife --name hello

16 để tránh bị trùng tên khi phát hành package lên npm)

Dù chưa code gì hết, nhưng mình hình dung ra cách mà chúng ta sẽ sử dụng thư viện như sau

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

5

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

6

Vâng. bắt đầu mã

Khởi tạo dự án

Cấu hình thư mục cấu trúc của chúng ta sẽ đơn giản như bên dưới

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

7

Cài đặt gói

Các gói mình sẽ cài đặt như sau

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

8

Các bạn sẽ thấy có thêm một plugin là

$ rollup main.js --file bundle.js --format iife --name hello

17 có tác dụng thu nhỏ JS

Cấu hình file config

Tiếp theo, chúng ta khai báo nội dung cho

$ rollup main.js --file bundle.js --format iife --name hello

12

const hello = function(name) {
  return 'Hello ' + name
};

export default hello;

9

Như bạn thấy trong file config, mình sẽ build thư viện này cho 3 môi trường. Ngoài ra mình sử dụng thêm

$ rollup main.js --file bundle.js --format iife --name hello

17 để thu nhỏ đầu ra

Cấu hình gói. json

Ngoài những thuộc tính thông thường như phiên bản, mô tả, …, chúng ta sẽ cấu hình một số thuộc tính đặc biệt sau

First first is script to bundle

$ rollup main.js --file bundle.js --format iife --name hello

0

Tiếp theo là định nghĩa các môi trường ứng dụng với đầu ra tệp

$ rollup main.js --file bundle.js --format iife --name hello

1

Để hiểu thêm về các thuộc tính trên, các bạn có thể đọc thêm ở bài viết What’s what? . trang tính json

viết mã

Sau khi config xong, chúng ta sẽ viết code cho file

$ rollup main.js --file bundle.js --format iife --name hello

60

$ rollup main.js --file bundle.js --format iife --name hello

2

Có lẽ mình không nên giải thích cách viết ngược như thế nào 😁

Tiếp theo, chúng ta sẽ bó đoạn mã trên

$ rollup main.js --file bundle.js --format iife --name hello

3

Và sau khi build, chúng ta sẽ có 3 tệp ứng dụng mới với 3 môi trường được tạo nằm trong thư mục

$ rollup main.js --file bundle.js --format iife --name hello

61

$ rollup main.js --file bundle.js --format iife --name hello

4

7. Xuất bản lên npm

Để chắc chắn rằng gói của chúng tôi đã được cài đặt và sử dụng thành công, các bạn hãy tìm hiểu

$ rollup main.js --file bundle.js --format iife --name hello

62 để xem cách kiểm tra gói trước khi xuất bản

Cách xuất bản lên npm cũng đơn giản, bạn chỉ cần đăng nhập vào npm, sau đó nhập lệnh

$ rollup main.js --file bundle.js --format iife --name hello

63. Tất cả quá trình đều được thực hiện thông qua dòng lệnh

$ rollup main.js --file bundle.js --format iife --name hello

5

$ rollup main.js --file bundle.js --format iife --name hello

6

Trong quá trình viết bài này và làm demo, mình cũng đã publish thư viện lên npm. https. //www. npmjs. com/gói/đảo ngược

Vì đã thành công nên tất cả mọi người đều có thể sử dụng thư viện của chúng ta. Cùng xem qua hai ví dụ mình sử dụng

$ rollup main.js --file bundle.js --format iife --name hello

15 trên CodePen và CodeSandbox

Trình duyệt môi trường

Mô-đun môi trường (Vue. ứng dụng js)

8. Kết luận

Bài viết khá dài, nhưng có một số điều bạn cần nhớ

1. Use Rollup to bundle code out used for many environment. Đây là thế mạnh của Rollup khi xây dựng thư viện
2. Cấu hình Rollup qua file config
3. Sử dụng plugin Rollup

Rollup còn rất nhiều tính năng, mình chỉ đi qua một phần nhỏ. Các bạn hãy lên trang chủ của Rollup để tìm hiểu sâu hơn

Có người hỏi rằng khi nào thì sử dụng Webpack và khi nào thì sử dụng Rollup?

Sử dụng webpack cho ứng dụng và Rollup cho thư viện

Nếu bạn muốn xây dựng ứng dụng, hãy sử dụng Webpack, muốn xây dựng thư viện sử dụng được ở nhiều môi trường, hãy sử dụng Rollup