Cách sử dụng Yarn trong Visual Studio 2017

Yarn Installation

Để chạy được Yarn bạn phải cài 2 thứ:

• The prequisite, Node.js.
• The Yarn command line utility.

Disable NPM trong Visual Studio 2017

Yarn sử dụng một file trong project của bạn là package.json, (file này tạo ra bằng cách chọn new file từ Visual Studio hoặc gõ lệnh npm init) để lưu danh sách các gói thư viện muốn cài đặt. Nó dùng chung với NPM. Để ngăn chặn việc xung đột giữa 2 thằng này, tôi sẽ vô hiệu hoá NPM trong Visual Studio.

Để tắt NPM vào menu Tools chọn Options. Trong cây bên trái như hình chọn tuỳ chọn cho cả NPM và Bower là False hết.

Cài đặt Project cho Yarn

Để sử dụng Yarn cho project bạn cần làm một số việc sau:

• Chắc chắn rằng project có file package.json. Nó nên đặt trong thư mục project của bạn. Nội dung file nên chứa một cắp dấu ngoặc nhọn mở và đóng:

{

}

• Hãy chắc chắn rằng có thư mục lib trong thư mục wwwroot. Hoặc nếu không phải .NET Core thì bạn có thể đặt nó ở chỗ nào cũng được.

Cấu trúc thư mục như sau:

+ Solution

    + Project

        + wwwroot

            + lib

        + Program.cs

        + Startup.cs

        + package.json

Sử dụng Yarn

Đây là việc bạn đang chờ. Đầu tiên mở console lên và gõ. Console này cso thể là Console trong Visual Studio mà vẫn dùng để migrate database Code First ấy. Sau đó bạn có thể thêm thư viện sử dụng Yarn:

cd [project dir]

yarn add --modules-folder=wwwroot\lib jquery

yarn add --modules-folder=wwwroot\lib [email protected]

Các gói giờ đã được cài đặt ở thư mục /wwwroot/lib vì nó nói cho Yarn nơi đặt các package được down về.

Thêm Yarn ShortCut cho Visual Studio 2017

Nếu bạn nghĩ rằng gõ nhiều mệt, bạn có thể đơn giản chúng bằng cách add chúng 1 short cut cho Visual Studio. Khi cài đặt Yarn sẽ tự dộng run trong thư mục của bạn. Tất cả những gì là bạn phải nói cho nó biết cần cài gì.

Trong Visual Studio, click Tools chọn External Tools từ menu. Trên popup click nút Add và điền vào các file dưới đây:

• Title: Yarn Add
• Command (thư mục của bạn có thể khác): C:\Program Files (x86)\Yarn\bin\yarn.cmd
• Arguments: add --modules-folder=wwwroot\lib
• Initial directory: $(ProjectDir)

Cũng check các checkbox:

• Use Output Window
• Prompt for arguments

Click OK để save.

Giờ bạn có thể dùng menu Yarn Add trong menu Tools để add các gói vào chỉ cần điền lệnh.

Tất cả bạn cần làm là click vào textbox và gõ tên gói. Ví dụ thêm jquery:

Click OK để Yarn làm việc và cài đặt gói.