TypeScript Nx Plugin

Tạo một Nx Plugin TypeScript hoàn chỉnh với máy chủ Model Context Protocol (MCP) tích hợp. Generator này tạo nền tảng để xây dựng các generator tùy chỉnh có thể được sử dụng liền mạch bởi các trợ lý AI để tự động tạo mã và scaffolding dự án.

Cách sử dụng

Tạo một Nx Plugin

Bạn có thể tạo một TypeScript Nx Plugin theo hai cách:

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin

Bạn cũng có thể thực hiện chạy thử để xem những tệp nào sẽ bị thay đổi

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

VSCode

1. Cài đặt Nx Console VSCode Plugin nếu bạn chưa cài đặt
2. Mở Nx Console trong VSCode
3. Nhấp Generate (UI) trong phần "Common Nx Commands"
4. Tìm kiếm @aws/nx-plugin - ts#nx-plugin
5. Điền các tham số bắt buộc
6. Nhấp Generate

Tùy chọn

Tham số	Kiểu	Mặc định	Mô tả
name Bắt buộc	string	-	Tên dự án TypeScript
directory	string	packages	Thư mục cha nơi thư viện được đặt.
subDirectory	string	-	Thư mục con nơi thư viện được đặt. Mặc định đây là tên thư viện.
preferInstallDependencies	boolean	true	Có nên cài đặt các dependencies sau khi generator chạy hay không. Đặt thành false để hoãn việc cài đặt khi chạy nhiều generator cùng lúc (việc cài đặt vẫn sẽ chạy nếu cần thiết để các generator tiếp theo có thể tính toán Nx project graph); cài đặt một lần vào cuối.

Kết quả của Generator

Generator sẽ tạo cấu trúc dự án sau:

• Thư mụcyour-plugin/

  • Thư mụcsrc/

    • index.ts Empty entry point for your plugin
    • Thư mụcmcp-server/

      • index.ts Exports your server
      • server.ts Main MCP server configuration
      • stdio.ts Entry point for your MCP server with STDIO transport
      • http.ts Entry point for your MCP server with Streamable HTTP transport
      • Thư mụctools/

        • create-workspace-command.ts Tool for workspace creation guidance
        • general-guidance.ts Tool for general Nx and plugin guidance
        • list-generators.ts Tool to list available generators
        • generator-guide.ts Tool for detailed generator information
      • utils.ts Utility functions for the MCP server
  • generators.json Nx generator configuration (initially empty)
  • package.json Plugin package configuration
  • tsconfig.json TypeScript configuration (CommonJS for Nx compatibility)
  • project.json Nx project configuration with build and package targets

Làm việc với Nx Plugin của bạn

Thêm Generators

Sau khi có dự án plugin, bạn có thể thêm các generator bằng cách sử dụng generator ts#nx-generator:

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

Bạn cũng có thể thực hiện chạy thử để xem những tệp nào sẽ bị thay đổi

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

VSCode

1. Cài đặt Nx Console VSCode Plugin nếu bạn chưa cài đặt
2. Mở Nx Console trong VSCode
3. Nhấp Generate (UI) trong phần "Common Nx Commands"
4. Tìm kiếm @aws/nx-plugin - ts#nx-generator
5. Điền các tham số bắt buộc
   • project: your-plugin
6. Nhấp Generate

Điều này sẽ thêm một generator mới vào plugin của bạn.

Tài liệu Generator

Đọc hướng dẫn ts#nx-generator để biết chi tiết về cách triển khai các generator.

Hãy đảm bảo viết một README.md chi tiết cho generator của bạn, vì nó được sử dụng bởi công cụ generator-guide của MCP Server.

Các Target của Dự án

Plugin được tạo bao gồm một số target quan trọng:

Build Target

Biên dịch mã TypeScript của bạn và chuẩn bị plugin để sử dụng:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

Package Target

Tạo một package có thể phân phối sẵn sàng để xuất bản lên NPM:

pnpm

pnpm nx package your-plugin

yarn

yarn nx package your-plugin

npm

npx nx package your-plugin

bun

bunx nx package your-plugin

Package target bao gồm tất cả các tài nguyên cần thiết:

• Các file JavaScript đã biên dịch
• Các file khai báo TypeScript
• Các file cấu hình generator và executor
• Các file tài liệu và giấy phép

Tích hợp MCP Server

Plugin cấu hình một MCP server bằng cách sử dụng generator ts#mcp-server.

Công cụ

Plugin bao gồm một MCP server hoàn chỉnh cung cấp cho các trợ lý AI các công cụ sau:

• general-guidance: Nhận các phương pháp hay nhất để làm việc với Nx và plugin của bạn
• create-workspace-command: Tìm hiểu cách tạo workspace mới có thể sử dụng plugin của bạn
• list-generators: Liệt kê tất cả các generator có sẵn trong plugin của bạn
• generator-guide: Nhận thông tin chi tiết về các generator cụ thể bao gồm schema và cách sử dụng

Cấu hình với các Trợ lý AI

Tệp Cấu hình

Hầu hết các trợ lý AI hỗ trợ MCP đều sử dụng cách tiếp cận cấu hình tương tự. Bạn sẽ cần tạo hoặc cập nhật tệp cấu hình với thông tin chi tiết về MCP server của mình:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "/path/to/your-mcp-server/stdio.ts"]
    }
  }
}

Phân giải Đường dẫn

Nếu bạn nhận được lỗi như ENOENT npx khi kết nối với server của mình, bạn có thể cần chỉ định đường dẫn đầy đủ đến npx, bạn có thể lấy được bằng cách chạy which npx trong terminal của mình.

Hot Reload

Trong khi phát triển MCP server của bạn, bạn có thể muốn cấu hình cờ --watch để trợ lý AI luôn thấy các phiên bản mới nhất của tools/resources:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "--watch", "/path/to/your-mcp-server/stdio.ts"]
    }
  }
}

Làm mới Tools

Nếu bạn thêm tools hoặc resources mới, bạn có thể cần làm mới MCP server của mình trong trợ lý AI.

Cấu hình Dành riêng cho Trợ lý

Vui lòng tham khảo tài liệu sau để cấu hình MCP với các Trợ lý AI cụ thể:

• Kiro
• Kiro CLI
• Claude Code
• Cursor
• Codex
• Cline
• Roo Code

Cấu hình Workspace

Một số Trợ lý AI, chẳng hạn như Kiro, cho phép bạn chỉ định cấu hình MCP server ở cấp độ workspace, điều này đặc biệt hữu ích để xác định các MCP server liên quan cho một dự án cụ thể.

Tùy chỉnh MCP Server

Bạn có thể mở rộng MCP server bằng cách sửa đổi server.ts để thêm các công cụ hoặc tài nguyên bổ sung cụ thể cho lĩnh vực của plugin của bạn.

Để biết thêm chi tiết về việc viết MCP Servers, hãy tham khảo hướng dẫn ts#mcp-server.

Xuất bản Plugin của bạn

Chuẩn bị để Xuất bản

1. Cập nhật Thông tin Package: Chỉnh sửa package.json của plugin với tên, phiên bản, mô tả và thông tin repository phù hợp.

2. Build Package:

   pnpm

   pnpm nx package your-plugin

   yarn

   yarn nx package your-plugin

   npm

   npx nx package your-plugin

   bun

   bunx nx package your-plugin

3. Kiểm tra Cục bộ: Bạn có thể kiểm tra plugin của mình cục bộ bằng cách cài đặt nó trong một workspace khác:

   npm install /path/to/your/workspace/dist/your-plugin/package

Xuất bản lên NPM

Khi plugin của bạn đã sẵn sàng:

cd dist/your-plugin/package
npm publish

Sử dụng Plugins đã Xuất bản

Sau khi xuất bản, người khác có thể cài đặt và sử dụng plugin của bạn:

pnpm

pnpm add -w your-plugin-name

yarn

yarn add your-plugin-name

npm

npm install --legacy-peer-deps your-plugin-name

bun

bun add your-plugin-name

Sau đó sử dụng các generator của bạn:

CLI

pnpm

pnpm nx g your-plugin-name:your-generator-name

yarn

yarn nx g your-plugin-name:your-generator-name

npm

npx nx g your-plugin-name:your-generator-name

bun

bunx nx g your-plugin-name:your-generator-name

Bạn cũng có thể thực hiện chạy thử để xem những tệp nào sẽ bị thay đổi

pnpm

pnpm nx g your-plugin-name:your-generator-name --dry-run

yarn

yarn nx g your-plugin-name:your-generator-name --dry-run

npm

npx nx g your-plugin-name:your-generator-name --dry-run

bun

bunx nx g your-plugin-name:your-generator-name --dry-run

VSCode

1. Cài đặt Nx Console VSCode Plugin nếu bạn chưa cài đặt
2. Mở Nx Console trong VSCode
3. Nhấp Generate (UI) trong phần "Common Nx Commands"
4. Tìm kiếm your-plugin-name - your-generator-name
5. Điền các tham số bắt buộc
6. Nhấp Generate

Cấu hình các Trợ lý AI với Plugin đã Xuất bản của bạn

MCP server của plugin đã xuất bản của bạn có thể được cấu hình như sau:

{
  "mcpServers": {
    "aws-nx-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "your-plugin-name", "your-plugin-name-mcp-server"]
    }
  }
}