6

Tôi muốn nói với bạn về một bộ tiện ích UI UI có sẵn trên GitHub mà nhóm của tôi và tôi làm việc hàng ngày. Cụ thể, mục tiêu của tôi là giúp bạn:

Đầu tiên, một số nền tảng. DevExtreme là một bộ thành phần UI để phát triển front-end và nó đã xuất hiện trong nhiều năm như một sản phẩm thương mại. Gần đây, chúng tôi đã chuyển thư viện sang GitHub và hiện tại nó có sẵn để sử dụng miễn phí (nếu bạn có một dự án phi thương mại ).

Trong bài viết này, bạn sẽ tìm hiểu cách sửa đổi các nguồn và tạo các bản dựng tùy chỉnh của DevExtreme! Tôi sẽ tập trung vào kho GitHub, cấu trúc mã nguồn, kỹ thuật, công cụ và thực tiễn. 

Băt đâu nao. Các lệnh dưới đây dành cho Ubuntu nhưng bạn có thể sử dụng bất kỳ hệ điều hành nào. Ngã ba github.com/DevExpress/DevExtreme repo công cộng, sau đó tạo ra một bản sao của ngã ba của bạn:

$ git clone https://github.com/<YOUR GITHUB ACCOUNT>/DevExtreme
$ cd DevExtreme/

Để xây dựng DevExtreme và chạy thử nghiệm, hãy cài đặt các SDK sau:
- Nút (khuyến nghị sử dụng phiên bản LTS).
- Một phiên bản gần đây của .NET Core SDK (một số phần của công cụ được viết bằng .NET).
- Docker  (Phiên bản cộng đồng, không bắt buộc, nhưng siêu hữu ích để thử nghiệm đơn vị).

Lệnh sau giúp kiểm tra xem mọi thứ đã được cài đặt đúng chưa:

$ node -v && dotnet --version && which docker

Để khôi phục các gói và cũng khởi tạo môi trường xây dựng và thử nghiệm, hãy thực hiện:

$ npm i
$ npm run build

Lần đầu tiên bạn chạy các lệnh này, có thể mất thêm vài phút để hoàn tất khôi phục gói. Chạy tiếp theo là nhanh hơn.

Làm việc với mã nguồn

Chúng ta hãy tham quan ngắn về mã nguồn DevExtreme.

Thư mục quan trọng nhất là ' js ', nơi chứa hầu hết mã thư viện. JavaScript codebase có cấu trúc tốt và được chia thành hàng trăm mô-đun riêng biệt. Việc sử dụng các mô-đun cùng với các linters giúp làm việc với mã dễ dàng hơn trong một trình soạn thảo như Visual Studio Code :

Gói theo giai đoạn tích hợp với Git và ngăn chặn các tệp JS khi có lỗi:

Các thư mục 'biểu tượng,' 'hình ảnh' và 'kiểu' chứa các nguồn cho các chủ đề DevExtreme; Bộ tiền xử lý LESS được sử dụng cho các kiểu. Trong thư mục ' build ', hệ sinh thái xây dựng được đặt, đặc biệt là các nhiệm vụ Gulp đã được chạy như một phần của npm run build lệnh. Nhân tiện, kết quả xây dựng được lưu trữ trong thư mục 'tạo tác' (không thuộc quyền kiểm soát nguồn). Thư mục ' sân chơi ' cung cấp các trang HTML soạn sẵn đơn giản cho các thử nghiệm.

Vị trí quan trọng thứ hai là ' thử nghiệm ', phần tiếp theo được dành riêng.

Bài kiểm tra đơn vị

DevExtreme sử dụng khung thử nghiệm đơn vị tùy chỉnh dựa trên QUnit. Để khởi chạy GUI thử nghiệm, hãy chạy tập lệnh thử nghiệm / khởi chạy (thử nghiệm / launch.cmd trên Windows).

Trong mã kiểm tra, trình tải mô-đun SystemJS được sử dụng, do đó không cần phải gọi lệnh xây dựng sau khi thay đổi.

Docker và Drone CLI

Ứng dụng web thử nghiệm ở trên có nghĩa là được sử dụng trong quá trình phát triển và sửa lỗi; có thể chạy và gỡ lỗi các trường hợp, bộ và danh mục kiểm tra riêng lẻ. Tôi khuyên bạn nên sử dụng hình ảnh Docker vì chúng cho phép bạn chạy tất cả các bài kiểm tra của mình mà không khóa trình duyệt của bạn. Chúng tôi đã thực hiện các hình ảnh Docker 'devextreme-build' chuyên dụng có sẵn trên Docker Hub . Để chạy chúng, thực thi:

$ sudo docker run --rm -ti -e TARGET=test -v REPO_PATH:/devextreme \
devexpress/devextreme-build:TAG ./docker-ci.sh

REPO_PATH nên được thay thế bằng đường dẫn tuyệt đối đến kho lưu trữ. TAG phải phù hợp với nhánh phát hành hiện tại (ví dụ  17_1).

Ví dụ, trong trường hợp của tôi trên Ubuntu, lệnh là:

$ sudo docker run --rm -ti -e TARGET=test -v ~/DevExtreme:/devextreme \
devexpress/devextreme-build:17_1 ./docker-ci.sh

Tôi là một fan hâm mộ lớn của Docker và lợi thế của việc chạy thử nghiệm theo cách này là môi trường hoàn toàn khớp với môi trường được sử dụng trong các nhiệm vụ của Travis CI . Trong trường hợp bạn đang chuẩn bị một yêu cầu kéo tới repo DevExtreme, kỹ thuật này đảm bảo rằng kiểm tra tự động GitHub sẽ vượt qua nếu chúng chuyển qua máy của bạn.

Thay vì gõ docker run lệnh dài , bạn cũng có thể sử dụng Drone CLI :

$ sudo drone exec --matrix TARGET=test

Bản dựng phát hành tùy chỉnh

Tạo các tạo phẩm phát hành (nghĩa là, với việc thu nhỏ và dọn dẹp) dễ dàng như việc gọi như sau:

$ npm run build-dist

Sau khi kết thúc, trong thư mục 'artifacts', bạn sẽ tìm thấy các tệp phân phối. Cùng một tập hợp các tệp có sẵn thông qua các gói DevExtreme chính thức.

Bạn có thể kiểm tra các nguồn từ GitHub và tạo các bản dựng với các bản sửa lỗi và tính năng mới nhất mà không cần chờ bản phát hành chính thức từ DevExpress. Bạn cũng có thể đề xuất thay đổi cho sản phẩm bằng cách gửi yêu cầu kéo. Điều này là có thể với giấy phép phi thương mại, không cạnh tranh mới  cho phép thực hiện thay đổi và phân phối các phiên bản sửa đổi của DevExtreme miễn là các điều khoản EULA khác được thỏa mãn.

Tôi hy vọng bạn sẽ hào hứng với DevExtreme nhiều như chúng tôi thích làm việc với nó. Chúng tôi dự định thực hiện các bản dựng phát hành xem trước cho phép bạn thử các tính năng và tiện ích mới. Để nhận thông tin cập nhật về tiến trình của chúng tôi, bạn có thể đăng ký repo chính thức DevExtreme GitHub  bằng cách nhấp vào nút 'Star' / 'Watch'.

Cảm ơn bạn.

|