Css đầu ra cuộn lên

Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách chúng tôi có thể tạo thư viện javascript và xuất bản nó lên npm. Trong bài viết trước, chúng tôi đã xây dựng một tập lệnh nhỏ để tạo menu dạng cây lồng nhau. Chúng tôi sẽ chuyển đổi nó thành gói npm tại đây

Bước 1. Khởi tạo thư mục và repo

Hãy tạo một thư mục cho thư viện và thêm README. tập tin md ở đó. Đây sẽ là thời điểm tốt để thực hiện git init và tạo một repo github từ xa để theo dõi nó. (Nếu bạn chưa quen với điều này, bạn có thể kiểm tra github howto tại đây)

Bước 2. Thêm tập lệnh và biểu định kiểu bên trong thư mục src

Trong hướng dẫn này, chúng tôi dự định xây dựng gói và sau đó sử dụng gói đó từ một dự án mẫu. Ta sẽ tạo 2 thư mục riêng. Một cho gói và một cho ví dụ

Trong thư mục gói, chúng tôi sẽ tạo các thư mục riêng cho tệp nguồn và tệp được tạo. Trong quy trình làm việc javascript hiện đại, bạn hiếm khi phân phối trực tiếp các tệp nguồn được mã hóa thủ công. Các tệp nguồn được chuyển qua các gói thực hiện các chuyển đổi và tối ưu hóa khác nhau, đồng thời cung cấp các tệp đầu ra mà sau đó có thể được sử dụng trong trình duyệt hoặc các môi trường khác. Vì vậy, chúng tôi sẽ tiếp tục và tạo hai tên thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

5 - cho các tệp nguồn và

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

6 - cho các tệp đầu ra. Chúng tôi không cần đụng đến thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

6. Nó sẽ được phổ biến bởi bundler

Bên trong thư mục src, hãy tạo 2 thư mục con -

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

8 và

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

9 để chứa các tệp javascript và biểu định kiểu tương ứng

Cấu trúc thư mục sẽ trông như thế này bây giờ

├── README.md
├── examples
│   ├── dist
│   ├── src
└── package
    ├── dist
    └── src
        ├── js
        └── styles

Chúng tôi sẽ sao chép nội dung của thẻ style trong ví dụ menu cây lồng nhau của chúng tôi vào gói/src/styles/main. scss. Chúng tôi đang sử dụng tiện ích mở rộng scss để có thể sử dụng các tính năng cụ thể của sass trong tương lai. Nhưng hiện tại, biểu định kiểu của chúng tôi thực sự chỉ là css thuần túy

Tương tự chúng ta cũng sẽ copy nội dung của thẻ style vào package/src/js/index. js

Chúng tôi đã thực hiện hai thay đổi đối với nội dung được sao chép từ thẻ tập lệnh

1. Chúng tôi đang nhập khẩu chính ngạch. scss ở trên cùng. Điều này sẽ cho trình đóng gói của chúng tôi biết cách định vị các biểu định kiểu để chúng có thể được thu nhỏ
2. Chúng tôi đã thêm một câu lệnh

   npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

   0 ở dưới cùng, cho phép chúng tôi xuất chức năng của mình dưới dạng mô-đun ES

Bước 3. Khởi tạo gói npm

Bây giờ hãy gọi npm init từ bên trong thư mục gói. Điều này sẽ tạo ra một gói. json mà chúng tôi sẽ chỉnh sửa để sửa đổi khóa

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

1 và thêm 2 khóa nữa -

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

2 và

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

3. Chúng tôi cũng sẽ đặt thuộc tính tệp thành danh sách trắng thư mục dist sẽ được thêm vào gói

Khóa

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

1 đại diện cho điểm vào của gói. Nếu chúng tôi đang xây dựng một thư viện được sử dụng ở phía máy chủ bằng NodeJS, thì chúng tôi sẽ trỏ thư viện này tới định dạng đầu ra CommonJS. Nhưng ở đây, chúng tôi đang xây dựng một thư viện giao diện hoàn toàn không sử dụng bên ngoài ngữ cảnh trình duyệt. Vì vậy, chúng tôi sẽ đặt nó để trỏ đến đầu ra định dạng mô-đun ES - điều này sẽ giúp nó có thể truy cập được thông qua các câu lệnh nhập. Vì vậy, giá trị được đặt thành

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

5. Tệp chưa tồn tại và chúng tôi sẽ tạo tệp bằng cách sử dụng gói của chúng tôi trong các bước tiếp theo

Điểm vào

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

2 có nghĩa là được sử dụng để trỏ cụ thể đến đầu ra của mô-đun ES. Điều này hữu ích trong trường hợp khi phần chính được đặt để trỏ đến đầu ra CommonJS. Trong trường hợp của chúng tôi, chúng tôi đã chỉ chính cho một. tập tin esm. Nhưng dù sao đi nữa, chúng tôi cũng sẽ đặt thuộc tính mô-đun để trỏ đến

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

5

Mục nhập

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

3 phải trỏ đến tệp tập lệnh có thể được tải trực tiếp trong thẻ tập lệnh của trình duyệt. Chúng tôi sẽ đặt giá trị này thành

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

9 trong đó umd là viết tắt của định nghĩa mô-đun phổ quát

Cả hai tệp điểm vào - esm cũng như umd sẽ được tạo bằng trình đóng gói như sau

Bước 4. Cài đặt tổng số

Chúng tôi sẽ sử dụng tổng số làm trình đóng gói để tạo các tệp phân phối gói của chúng tôi. Có sẵn nhiều hệ thống gói khác nhau — webpack hiện đang phổ biến nhất. Nhưng rollup phù hợp hơn để tạo các thư viện có thể phân phối lại

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

Ngoài rollup, chúng tôi cũng đang cài đặt thêm 2 plugin tại đây — một để chuyển đổi scss thành css và plugin terser để giảm thiểu các tệp được tạo

Bước 5. Tạo tệp js cấu hình tổng số

Chúng tôi hướng dẫn gói tổng số bằng cách sử dụng tổng số. cấu hình. tập tin js

Trong cấu hình trên, chúng tôi đang chỉ định đầu vào là chỉ mục. js mà chúng ta đã tạo bên trong src/js. Chúng tôi không phải chỉ định một đầu vào riêng cho css vì chúng tôi đã nhập các kiểu bên trong chỉ mục. js chính nó

Chúng tôi cũng đã định cấu hình 2 đầu ra khác nhau, mỗi đầu ra tương ứng với một trong các điểm vào được chỉ định trong gói. json. Chỉ cần đề cập đến các định dạng như trên, rollup sẽ đảm nhận việc chuyển đổi nguồn của chúng tôi sang định dạng đó

Chúng tôi cũng cần thu nhỏ các tệp đầu ra được tạo để phân phối, việc này được thực hiện bởi plugin

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

20. Và cuối cùng, chúng tôi tạo một css đầu ra được rút gọn bằng cách sử dụng plugin scss

Bước 6. Xây dựng các tập tin đầu ra

Bây giờ tất cả các cấu hình đã hoàn tất, chúng ta có thể gọi tập lệnh dòng lệnh cuộn lên với nhiều tùy chọn khác nhau. Gọi

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

21 sẽ xây dựng gói. Nhưng thay vì gọi nó trực tiếp, thay vào đó, chúng tôi sẽ đặt các lệnh tương ứng với các tập lệnh khác nhau trong gói. json bằng cách chỉ định một mảng tập lệnh như sau

Bây giờ chúng ta chỉ cần gọi

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

22 và nó sẽ tạo ra tất cả các tệp đầu ra bên trong thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

23. Bây giờ chúng tôi cần xác minh nó hoạt động

Bước 7. Kiểm tra phiên bản umd của gói bằng một ví dụ html bằng cách sử dụng liên kết npm

Để kiểm tra xem gói hoạt động như thế nào khi được nhập bởi một ứng dụng khác, chúng ta có thể tạo một ứng dụng mẫu và nhập gói này

Chúng tôi sẽ tạo một tệp

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

24 bên trong thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

25. Hãy sao chép nội dung html sau vào tệp

Lưu ý rằng tệp ở trên tham chiếu tệp js và css từ

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

26. Nhưng chúng tôi chưa xuất bản gói của mình lên npm. Vậy làm cách nào để đảm bảo rằng thư mục node_modules bên trong

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

25 sẽ chứa gói listree?

NPM cung cấp lệnh

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

28 chỉ cho việc này. Nếu bạn đã quen với môi trường gói của python, thì điều này có tác dụng tương tự như chạy

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

29 từ bên trong thư mục gói. Về cơ bản, nó sẽ cài đặt gói ở bất kỳ nơi nào bạn muốn kiểm tra gói đó - trong chế độ phát triển. Vì vậy, nếu có bất kỳ thay đổi nào được thực hiện trong mã gói, điều đó cũng sẽ có sẵn ngay lập tức để ứng dụng gọi kiểm tra. Điều này đảm bảo rằng chúng tôi không phải xuất bản mỗi khi chúng tôi muốn kiểm tra một thay đổi nhỏ mà chúng tôi đã thực hiện. Vì vậy, những gì chúng ta sẽ làm thay vào đó là liên kết gói cục bộ

Vì vậy, trước tiên, chúng tôi sẽ chạy

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

28 bên trong thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

31 của chúng tôi. Khi lệnh này thành công, gói được liên kết với thư mục mô-đun nút chung trong máy phát triển

Bây giờ để sử dụng gói của chúng tôi trong một gói khác mà chúng tôi đang phát triển, chúng tôi sẽ vào bên trong thư mục ví dụ và chạy

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

32 ở đó. Điều này sẽ tạo một thư mục

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

26 bên trong thư mục ví dụ với gói

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

34 được bao gồm bên trong. Khi mở tệp

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

35 trong trình duyệt, chúng tôi có thể thấy chức năng hoạt động như mong đợi

Bước 8. Kiểm tra việc nhập gói dưới dạng mô-đun ES6 bằng cách sử dụng webpack

Để kiểm tra hành vi của gói dưới dạng mô-đun ES6, chúng tôi sẽ tạo một src/index. js bên trong thư mục ví dụ với nội dung sau

Để làm cho tập lệnh này có thể tải được thông qua thẻ tập lệnh, chúng tôi sẽ sử dụng webpack để chuyển đổi và gói tập lệnh đó. Chúng tôi sử dụng webpack thay vì rollup ở đây vì webpack phù hợp hơn với gói ứng dụng ngay lập tức (trong khi rollup phù hợp hơn với gói thư viện) và sẽ phù hợp hơn để kiểm tra hành vi của gói của chúng tôi khi nó được gói qua webpack vì webpack là tốt nhất

Trước tiên, chúng tôi sẽ phải cài đặt webpack và webpack-cli bằng cách chạy

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

36

Sau đó, chúng tôi thêm một

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

37 như thế này

Nếu chúng ta chạy

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

38, nó sẽ tạo ra tệp

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

39. Bây giờ chúng tôi sẽ sao chép umd của chúng tôi. html thành

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

20 và thay thế thẻ script ở dưới cùng đề cập đến danh sách. uhm. tối thiểu. js với thẻ script đề cập đến tệp

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

39 này. Đó là, chúng tôi sẽ thay thế này

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

2

Với cái này -

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

3

Trong trường hợp thứ hai, chúng ta không cần gọi hàm

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

22 vì chúng ta đã gọi nó bên trong chỉ mục của mình. js được đóng gói dưới dạng

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

23. Bây giờ nếu chúng tôi mở

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

20 trong trình duyệt, chúng tôi có thể thấy rằng chức năng hoạt động như mong đợi

Lưu ý rằng chúng tôi đã kiểm tra cả hai tệp html bằng cách tải chúng trực tiếp bằng giao thức

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

25. Nếu chúng tôi muốn kiểm tra chúng trong bối cảnh chúng được phục vụ qua máy chủ web, chúng tôi có thể sử dụng plugin html và devserver của webpack để làm điều tương tự. Nhưng hãy giữ nó như một nhiệm vụ cho một bài đăng trong tương lai vì mục đích ngắn gọn

Bước 9. Đẩy tới repo github

Bây giờ chúng ta đã hoàn thành việc tạo gói, hãy cũng thực hiện thao tác đẩy lên github. Chúng ta cũng cần chỉnh sửa. gitignore để loại trừ các thư mục dist và node_modules

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

2

Phiên bản cam kết khóa gói là được. tập tin json mặc dù

Bước 10. Xuất bản gói lên npm

Để làm điều này, trước tiên chúng tôi sẽ tạo một tài khoản trên https. //www. npmjs. com/ (chỉ khi chúng tôi chưa có). Sau đó, trên máy phát triển cục bộ, chúng tôi thực hiện lệnh

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

26. Điều này sẽ yêu cầu chúng tôi nhập tên người dùng, mật khẩu và email. Sau khi nhập, chúng tôi đã sẵn sàng xuất bản gói

Chỉ cần gọi

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

27 bên trong thư mục gói và chúng ta có thể thấy gói được xuất bản lên kho lưu trữ npm

Bước 11. Sử dụng gói đã xuất bản trong html

Một điều tuyệt vời khi xuất bản lên npm là gói của chúng tôi nhận được hỗ trợ CDN ngay lập tức. Xuất bản một gói lên npm làm cho nó tự động có sẵn thông qua các mạng phân phối nội dung khác nhau như Unpkg, CDNJS và JSDelivr. Chúng ta có thể chọn bất kỳ trong số này. Ví dụ: nếu chúng tôi quyết định sử dụng unpkg, chúng tôi có thể truy cập phiên bản umd js của gói của chúng tôi như thế này https. //giải nén. com/listtree/dist/listree. uhm. tối thiểu. js. Chúng tôi có thể kiểm tra điều này bằng cách sửa đổi cả url thẻ css và js trong tệp html mẫu của chúng tôi để trỏ đến liên kết CDN này thay vì tệp cục bộ và chúng tôi sẽ thấy rằng chức năng vẫn hoạt động như mong đợi

Vì vậy, chúng tôi đã tạo và xuất bản một gói lên kho lưu trữ NPM và sử dụng thành công gói tương tự trong một ứng dụng. Điều đó kết thúc hướng dẫn này. Mã của gói được tạo cho hướng dẫn này có sẵn tại https. //github. com/SuryaSankar/listree. Vui lòng xem xét gắn dấu sao cho repo nếu bạn thấy gói hoặc hướng dẫn này hữu ích. Bản thân gói này có sẵn để sử dụng trong npm dưới tên

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

34 tại đây. Bạn có thể cài đặt và sử dụng nó chỉ bằng cách gọi

npm install --save-dev rollup rollup-plugin-scss rollup-plugin-terser

29 trong dự án của bạn