Dự án phản ứng trong Visual Studio 2017

Question

Tôi muốn phát triển ứng dụng React trong Visual Studio 2017 cùng với ứng dụng .NET của tôi (trong cùng một giải pháp).

Tôi đang sử dụng TypeScript, vì vậy tôi muốn một loại dự án nơi tôi có thể tùy chỉnh bản dựng (tôi muốn webpack dự án, v.v., do đó, Visual Studio TypeScript chuẩn không đủ).

Tôi đã cài đặt node.js developer tools nhưng chúng chỉ cho phép tôi tạo các dự án cụ thể node.js (chạy một thể hiện node.js khi bắt đầu) và không cho phép tôi tùy chỉnh quá trình xây dựng.

Loại dự án nào sẽ là tốt nhất cho điều này?

Answer 1

Gần đây tôi đã làm điều này và muốn giới thiệu như sau:

1. Tạo một "Trống" dự án giải pháp trong Visual Studio 2017.
2. Add/tạo ra dự án NET của bạn như bạn làm bình thường trong Visual Studio.
3. Bây giờ hãy tạo dự án React của bạn. Tôi đã sử dụng create-react-app từ Facebook để thực sự tạo dự án React của mình. Điều này có rất nhiều tính năng được xây dựng tốt như Webpack, Jest (để thử nghiệm), sợi (để quản lý gói), v.v. Tuy nhiên, các chi tiết này "ẩn" khỏi bạn để dự án được tạo trông đơn giản hơn nhiều. Nếu bạn do cần kiểm soát nhiều hơn đối với quá trình xây dựng/thử nghiệm, bạn có thể chạy lệnh create-react-app eject. Lưu ý rằng đây là thao tác "một chiều" vì bạn không thể đặt lại tệp vào create-react-app. Bạn sẽ cần phải cài đặt riêng biệt node và yarn, nếu điều đó không rõ ràng.

4. Vì bạn cũng muốn sử dụng nguyên cảo bạn nên sử dụng kịch bản react-scripts-ts như vậy:

   create-react-app my-app --scripts-version=react-scripts-ts

   Microsoft có một đi bộ tốt thông qua here.

5. Phần khó khăn là đưa dự án React được tạo vào Visual Studio. Tôi đã làm điều này bằng cách cài đặt mô-đun "phát triển Node.js" từ "Visual Studio Installer" được cài đặt với Visual Studio. Thật không may, Microsoft dường như đã loại bỏ mẫu dự án TypeScript trống hoặc trống (xem here).

6. Khi công cụ Node.js được cài đặt, bạn có thể tạo dự án dựa trên nút trong giải pháp của mình. Có một vài lựa chọn trong File -> New -> Project ... -> Templates -> Ngôn ngữ khác -> Điều hướng menu trái của TypeScript. Tôi đã chọn "Ứng dụng web trống Node.js".

7. Sau đó bạn sẽ cần sao chép các tệp dự án React được tạo bởi create-react-app vào dự án Visual Studio của bạn. Tôi tìm thấy nó dễ dàng hơn để tạo ra các thư mục trong Visual Studio để họ được thêm vào tập tin dự án, sau đó sao chép các tập tin các thư mục được tạo ra, và cuối cùng thêm chúng vào thư mục dự án trong Visual Studio.

8. Tại thời điểm này, bạn có thể chạy tập lệnh trong tệp package.json đã được thêm bởi create-react-app. Tôi thích chạy chúng ở dòng lệnh, nhưng bạn có thể chạy chúng trong Visual Studio cũng như sử dụng "Task Runner Explorer" của Mads Kristensen.

Answer 2

Một khả năng khác là sử dụng react extension trong Visual Studio Code. Đó không phải chính xác những gì bạn yêu cầu, nhưng bạn sẽ có giao diện tương tự như Visual studio và hỗ trợ React đầy đủ.