6 cách thực hành tốt nhất và lời khuyên chuyên nghiệp khi sử dụng Angular CLI

Tương lai là bây giờ (bởi Sébastien Jermer)
Tuyên bố miễn trừ trách nhiệm: Bài viết tập trung vào phiên bản Angular CLI LESS THAN 6.0.0 được phát hành vào tháng 4 năm 2018, mọi thứ vẫn còn khá nhiều, điều duy nhất thay đổi là các cờ mặc định của bản dựng prod, vui lòng xem qua bản dựng chính thức của Angular CLI ng tài liệu.
Theo dõi Release Butler, một bot twitter tôi đã tạo để giúp bạn cập nhật các bản phát hành của Angular CLI, Angular và nhiều thư viện lối vào phổ biến

Phát triển ứng dụng Angular với Angular CLI là một trải nghiệm rất thú vị! Nhóm Angular đã cung cấp cho chúng tôi CLI tuyệt vời hỗ trợ hầu hết những thứ cần thiết cho bất kỳ dự án nghiêm túc nào.

Cấu trúc dự án được chuẩn hóa với các khả năng kiểm tra đầy đủ (cả thử nghiệm đơn vị và e2e), giàn giáo mã, xây dựng cấp sản xuất với sự hỗ trợ cho việc sử dụng cấu hình cụ thể của môi trường. Đó là một giấc mơ thành hiện thực và rất nhiều giờ tiết kiệm cho mỗi dự án mới. Cảm ơn đội Angular!

Mặc dù Angular CLI hoạt động tốt ngay từ đầu, nhưng có một số cải tiến cấu hình tiềm năng và thực tiễn tốt nhất chúng ta có thể sử dụng để làm cho các dự án của chúng tôi thậm chí tốt hơn!

Chúng ta sẽ học gì

  1. Thực tiễn tốt nhất cho kiến ​​trúc với các mô-đun Tính năng cốt lõi, được chia sẻ và lười biếng
  2. Sử dụng bí danh cho các thư mục ứng dụng và môi trường để hỗ trợ nhập khẩu sạch hơn
  3. Tại sao và làm thế nào để sử dụng Sass và Vật liệu góc
  4. Làm thế nào để thiết lập xây dựng sản xuất tốt
  5. Thay vào đó, hãy tạm biệt PhantomJS và sử dụng Chrome không đầu (thử nghiệm)
  6. Làm cách nào để phát hành dự án của chúng tôi với thay đổi được tạo tự động và vết sưng phiên bản chính xác

1. Một chút kiến ​​trúc

OK, vì vậy chúng tôi đã tạo dự án mới của chúng tôi bằng Angular CLI nhưng bây giờ thì sao? Chúng ta có nên tiếp tục tạo các dịch vụ và thành phần của mình vào một số thư mục ngẫu nhiên. Làm thế nào để chúng tôi cấu trúc dự án của chúng tôi?

Một hướng dẫn tốt để tuân theo là chia ứng dụng của chúng tôi thành ít nhất ba mô-đun khác nhau - Lõi, Chia sẻ và Tính năng (có lẽ chúng tôi sẽ cần nhiều hơn một mô-đun tính năng).

CoreModule

Tất cả các dịch vụ phải có một và chỉ một phiên bản cho mỗi ứng dụng (dịch vụ đơn lẻ) nên được triển khai tại đây. Ví dụ điển hình có thể là dịch vụ xác thực hoặc dịch vụ người dùng. Hãy xem một ví dụ về triển khai CoreModule.

SharedModule

Tất cả các thành phần và đường ống dumbem nên được thực hiện ở đây. Các thành phần này không nhập các dịch vụ nhập và tiêm từ lõi hoặc các tính năng khác trong các hàm tạo của chúng. Họ sẽ nhận được tất cả dữ liệu mặc dù các thuộc tính trong mẫu của thành phần sử dụng chúng. Tất cả điều này tổng hợp cho đến việc SharedModule không có bất kỳ sự phụ thuộc nào vào phần còn lại của ứng dụng của chúng tôi.

Đây cũng là nơi hoàn hảo để nhập và tái xuất các thành phần Vật liệu góc.

Cách chuẩn bị cấu trúc dự án bằng Angular CLI

Chúng tôi có thể tạo các mô-đun Core và Shared ngay sau khi tạo dự án mới. Bằng cách đó, chúng tôi sẽ được chuẩn bị để tạo ra các thành phần và dịch vụ bổ sung ngay từ đầu.

Chạy ng tạo lõi mô-đun. Sau đó tạo tệp index.ts trong thư mục lõi và xuất lại chính CoreModule. Chúng tôi sẽ tái xuất các dịch vụ công cộng bổ sung cần có trong toàn bộ ứng dụng trong quá trình phát triển hơn nữa.

Điều đó đang được thực hiện, chúng ta có thể làm tương tự cho mô-đun chia sẻ.

FeatureModule

Chúng tôi sẽ tạo ra nhiều mô-đun tính năng cho mọi tính năng độc lập của ứng dụng của chúng tôi. Các mô-đun tính năng chỉ nên nhập dịch vụ từ CoreModule. Nếu mô-đun tính năng A cần nhập dịch vụ từ mô-đun tính năng B xem xét chuyển dịch vụ đó vào lõi.

Trong một số trường hợp, nhu cầu về các dịch vụ chỉ được chia sẻ bởi một số tính năng và sẽ không có ý nghĩa gì khi chuyển chúng vào cốt lõi. Trong trường hợp đó, chúng ta có thể tạo các mô-đun tính năng chia sẻ đặc biệt như được mô tả sau trong bài viết này.
Nguyên tắc chung là cố gắng tạo ra các tính năng mà don don phụ thuộc vào bất kỳ tính năng nào khác chỉ trên các dịch vụ được cung cấp bởi CoreModule và các thành phần được cung cấp bởi SharedModule.

Điều này sẽ giữ cho mã của chúng tôi sạch sẽ, dễ bảo trì và mở rộng với các tính năng mới. Nó cũng làm giảm nỗ lực cần thiết cho tái cấu trúc. Nếu được tuân thủ đúng, chúng tôi sẽ tự tin rằng những thay đổi đối với một tính năng có thể ảnh hưởng hoặc phá vỡ phần còn lại của ứng dụng của chúng tôi.

Tải nhanh

Chúng ta nên lười biếng tải các mô-đun tính năng của chúng tôi bất cứ khi nào có thể. Về mặt lý thuyết chỉ có một mô-đun tính năng nên được tải đồng bộ trong quá trình khởi động ứng dụng để hiển thị nội dung ban đầu. Mỗi mô-đun tính năng khác nên được tải một cách lười biếng sau khi người dùng kích hoạt điều hướng.

2. Bí danh cho ứng dụng và môi trường

Bí danh thư mục ứng dụng và môi trường của chúng tôi sẽ cho phép chúng tôi thực hiện nhập khẩu sạch sẽ nhất quán trong toàn bộ ứng dụng của chúng tôi.

Xem xét giả thuyết, nhưng tình hình thông thường. Chúng tôi đang làm việc trên một thành phần nằm sâu ba thư mục trong một tính năng A và chúng tôi muốn nhập dịch vụ từ lõi nằm sâu hai thư mục. Điều này sẽ dẫn đến câu lệnh nhập trông giống như nhập {someService} từ '../../../core/subpackage1/subpackage2/some.service'.

Chắc chắn không phải là hàng nhập khẩu sạch nhất từ ​​trước đến nay

Và điều tồi tệ hơn nữa, bất cứ khi nào chúng tôi muốn thay đổi vị trí của bất kỳ hai tệp nào trong số đó, câu lệnh nhập của chúng tôi sẽ bị hỏng. So sánh điều đó với nhập khẩu {someService} ngắn hơn nhiều từ "@ app / core". Có vẻ tốt hơn, phải không?

Để có thể sử dụng các bí danh, chúng ta phải thêm các thuộc tính cơ sở và đường dẫn vào tệp tsconfig.json như thế này

Chúng tôi cũng đang thêm bí danh @env để có thể dễ dàng truy cập các biến môi trường từ bất kỳ đâu trong ứng dụng của chúng tôi bằng cách sử dụng cùng một lệnh nhập {môi trường} từ câu lệnh "@ env / môi trường". Nó sẽ hoạt động cho tất cả các môi trường được chỉ định bởi vì nó sẽ tự động giải quyết tệp môi trường chính xác dựa trên cờ --env được truyền cho lệnh ng build.

Với các đường dẫn của chúng tôi, giờ đây chúng tôi có thể nhập môi trường và dịch vụ như thế này

Bạn có thể nhận thấy rằng chúng tôi nhập các thực thể (như someSingletonService trong ví dụ trên) trực tiếp từ @ app / core thay vì @ app / core / some-pack / some-singleton.service. Điều này có thể là nhờ tái xuất mọi thực thể công cộng trong tệp index.ts chính. Chúng tôi tạo một tệp index.ts cho mỗi gói (thư mục) và chúng trông giống như thế này

Trong hầu hết các ứng dụng, các thành phần và dịch vụ của mô-đun tính năng cụ thể thường sẽ chỉ phải có quyền truy cập vào các dịch vụ từ CoreModule và các thành phần từ SharedModule. Đôi khi điều này có thể không đủ để giải quyết trường hợp kinh doanh cụ thể và chúng tôi cũng sẽ cần một số loại mô-đun tính năng được chia sẻ trên cơ sở, đó là cung cấp chức năng cho một tập hợp con giới hạn của các mô-đun tính năng khác.

Trong trường hợp này, chúng tôi sẽ kết thúc với một cái gì đó như nhập {Một số dịch vụ} từ '@ app / shared-Feature'; Vì vậy, tương tự như lõi, tính năng chia sẻ cũng được truy cập bằng cách sử dụng bí danh @app.

Các phụ thuộc mô-đun tuân theo cấu trúc cây trông rất giống với cây thành phần nổi tiếng

3. Sử dụng Sass

Sass là một bộ tiền xử lý kiểu mang đến sự hỗ trợ cho những thứ ưa thích như các biến (mặc dù css cũng sẽ sớm nhận được các biến), các hàm, mixins Bạn đặt tên cho nó là Rối

Sass cũng được yêu cầu sử dụng hiệu quả thư viện Thành phần Vật liệu góc chính thức với khả năng theo chủ đề mở rộng. Sẽ an toàn khi cho rằng sử dụng Sass it, lựa chọn mặc định cho hầu hết các dự án.

Để sử dụng Sass, chúng ta phải tạo dự án của mình bằng lệnh mới Angular CLI ng với cờ scss --style. Điều này thiết lập hầu hết các cấu hình cần thiết. Một thứ không được thêm vào theo mặc định là stylePre ProcessorOptions với includePaths và chúng ta có thể tự thiết lập nó với các giá trị "./" và "./theme" tùy chọn.

Điều này giúp trình soạn thảo của chúng tôi tìm các ký hiệu được nhập và nâng cao trải nghiệm của nhà phát triển với việc hoàn thành mã của các biến Vật liệu góc và các hàm tiện ích.

Khi theo chủ đề các ứng dụng Vật liệu góc, nó có một cách thực hành tốt để trích xuất các định nghĩa chủ đề vào thư mục chủ đề riêng biệt, một chủ đề cho mỗi tệp.
Theo dõi tôi trên Twitter để nhận thông báo về các bài đăng blog mới nhất và nội dung thú vị

4. Bản dựng

Dự án được tạo bởi Angular CLI chỉ đi kèm với một kịch bản xây dựng ng rất đơn giản. Để tạo ra các tạo phẩm cấp sản xuất, chúng ta phải tự thực hiện một chút tùy chỉnh.

Chúng tôi thêm "build: prod": "ng build --target sản xuất --build-tối ưu hóa --vendor-chunk" vào các tập lệnh pack.json của chúng tôi.

Mục tiêu sản xuất

Đây là một cờ ô cho phép thu nhỏ mã và nhiều cờ xây dựng hữu ích theo mặc định. Nó tương đương với việc sử dụng theo dõi

  • --en môi trường prod tập tin sử dụng môi trường.prod.ts cho các biến môi trường
  • --aot - cho phép biên dịch trước thời gian. Điều này sẽ trở thành một thiết lập mặc định trong các phiên bản tương lai của Angular CLI nhưng bây giờ chúng tôi phải kích hoạt thủ công này
  • --output-băm tất cả - nội dung băm của các tệp được tạo và nối băm vào tên tệp để tạo điều kiện cho bộ đệm ẩn của trình duyệt (mọi thay đổi đối với nội dung tệp sẽ dẫn đến hàm băm khác nhau và do đó trình duyệt buộc phải tải phiên bản mới của tệp)
  • --extract-css true - trích xuất tất cả các css vào tệp biểu định kiểu riêng biệt
  • --sourcemaps false - vô hiệu hóa việc tạo bản đồ nguồn
  • --named-chunks false - vô hiệu hóa bằng cách sử dụng tên người có thể đọc được cho chunk và thay vào đó sử dụng số

Cờ hữu ích khác

  • --build-tối ưu hóa - tính năng mới dẫn đến các gói nhỏ hơn nhưng thời gian xây dựng lâu hơn nhiều vì vậy hãy thận trọng khi sử dụng! (cũng nên được bật theo mặc định trong tương lai)
  • --vendor-chunk - trích xuất tất cả mã nhà cung cấp (thư viện) thành đoạn riêng

Đồng thời kiểm tra tài liệu chính thức cho các cờ cấu hình có sẵn khác có thể hữu ích trong dự án cá nhân của bạn.

5. Phantom JS đã chết! Chrome không đầu sống lâu!

PhantomJS là một trình duyệt không đầu rất nổi tiếng đã được giải mã GIẢI PHÁP để chạy thử nghiệm frontend trên máy chủ CI và nhiều máy dev.

Mặc dù vẫn ổn, nhưng nó hỗ trợ cho các tính năng ECMAScript hiện đại bị chậm. Hơn nữa, hành vi phi tiêu chuẩn của nó đã gây đau đầu trong nhiều trường hợp khi các bài kiểm tra được thực hiện tại địa phương mà không gặp vấn đề gì nhưng chúng vẫn phá vỡ môi trường CI.

May mắn thay, chúng tôi không phải đối phó với nó nữa!

Chrome không đầu - Cuộc thử nghiệm Frontend đã bắt đầu!

Như tài liệu chính thức nói

Chrome không đầu đang vận chuyển trong Chrome 59. Đây là một cách để chạy trình duyệt Chrome trong môi trường không đầu. Về cơ bản, chạy Chrome mà không cần chrome! Nó mang tất cả các tính năng nền tảng web hiện đại được cung cấp bởi Chromium và công cụ kết xuất Blink cho dòng lệnh.
Tuyệt quá! Vậy làm thế nào chúng ta có thể sử dụng nó trong dự án Angular CLI của chúng tôi?

Chúng tôi thêm cờ --browser ChromeHeadless vào lệnh thử nghiệm của mình để kết thúc bằng "test": "ng test --browser ChromeHeadless --single-run" và "watch": "ng test --browser ChromeHeadless" trong gói của chúng tôi. kịch bản json. Khá đơn giản, ha!

6. Sử dụng thông điệp cam kết được tiêu chuẩn hóa và trình tạo thay đổi tự động

Nó luôn luôn tuyệt vời để có một cái nhìn tổng quan nhanh về các tính năng mới và sửa lỗi của dự án mà chúng tôi quan tâm.

Hãy để cung cấp cho người dùng của chúng tôi cùng một sự tiện lợi!

Viết thay đổi bằng tay sẽ là nhiệm vụ dễ bị lỗi vô cùng tẻ nhạt vì vậy tốt nhất là tự động hóa quá trình đó thay thế. Có rất nhiều công cụ có sẵn có thể thực hiện công việc nhưng hãy để tập trung vào phiên bản tiêu chuẩn.

Công cụ này tự động tạo và cập nhật tệp CHANGELOG.md với tất cả các cam kết theo thông số kỹ thuật Cam kết thông thường và xác định chính xác phiên bản mới của dự án của chúng tôi.

Cam kết thông thường xác định loại bắt buộc, tùy chọn (phạm vi): theo sau là thông báo cam kết. Cũng có thể thêm phần thân và chân trang tùy chọn, cả hai được phân tách bằng một dòng trống. Hãy để chúng tôi thấy nó trông như thế nào trong thực tế bằng cách kiểm tra một ví dụ về thông điệp cam kết đầy đủ của thư viện mô hình ngx.

sửa lỗi (phụ thuộc): nhiều phiên bản của rxjs trong một dự án (TS90010)
THAY ĐỔI THAY ĐỔI: rxjs bây giờ là phụ thuộc thay vì phụ thuộc
đóng # 1

Phiên bản tiêu chuẩn sẽ chính xác nâng cấp phiên bản MAJOR của dự án vì sự hiện diện của từ khóa BREAKING CHANGE trong phần thân.

CHANGELOG.md được tạo sau đó sẽ trông giống như thế này.

Ví dụ về tệp CHANGELOG.md được tạo bởi thư viện phiên bản tiêu chuẩn

Trông thật ngọt ngào! Vậy làm thế nào chúng ta có thể sử dụng điều này trong dự án của chúng tôi?

Chúng tôi bắt đầu bằng cách cài đặt npm install -D phiên bản tiêu chuẩn để lưu nó trong devDependencies của chúng tôi và thêm "phát hành": "phiên bản tiêu chuẩn" vào tập lệnh pack.json của chúng tôi.

Chúng tôi cũng có thể thêm git đẩy và npm xuất bản để tự động hóa toàn bộ quá trình. Trong trường hợp này, chúng tôi sẽ kết thúc bằng "phát hành": "phiên bản tiêu chuẩn && git đẩy - chủ thẻ gốc theo dõi && npm xuất bản".

Lưu ý rằng chúng tôi đã sử dụng && để xâu chuỗi các lệnh của chúng tôi phụ thuộc vào nền tảng và chỉ hoạt động trên các hệ thống dựa trên Unix (cũng như trên Windows với Cygwin, Gitbash hoặc hệ thống con Win10 mới cho Linux).

THƯỞNG: Sử dụng tài nguyên gốc (Intellij IDEA, chỉ dành cho Webstorm)

Intellij IDEA sẽ không luôn luôn tìm thấy tất cả các đường dẫn theo mặc định, điều này sẽ dẫn đến nhiều dấu lỗi màu đỏ và hỗ trợ hoàn thành mã bị tê liệt. May mắn thay, giải pháp rất đơn giản. Chỉ cần chọn thư mục src và đánh dấu nó là Nguồn gốc.

Đánh dấu thư mục src là Nguồn gốc

Tuyệt quá! Bạn đã làm cho đến cùng!

Tôi hy vọng bạn tìm thấy một số lời khuyên và thực hành tốt nhất hữu ích! Hãy ủng hộ bài viết này với của bạn để truyền bá những lời khuyên này đến nhiều đối tượng hơn!

Bắt đầu một dự án Angular? Kiểm tra Angular NgRx Vật liệu khởi đầu!
Angular NgRx Material Starter với các thực tiễn tốt nhất, theo chủ đề và nhiều hơn nữa!

Ngoài ra, vui lòng kiểm tra một số bài viết Angular thú vị khác

Và đừng bao giờ quên, tương lai tươi sáng
Rõ ràng là tương lai tươi sáng (của Sven Scheuermeier)