Đây là dự án [Ezygrapes](https://github.com/youngmonkeys/ezygrapes) Mở terminal (Command Prompt, PowerShell, hoặc Terminal trên Linux/Mac). Dưới đây là hướng dẫn cho Windowns PowerShell. ## 1. Chuẩn bị môi trường - `nvm install 16`: Cài đặt Node.js phiên bản 16 bằng nvm (Node Version Manager) để đảm bảo dự án sử dụng đúng phiên bản Node.js cần thiết. - `nvm use 16`: Chuyển sang sử dụng Node.js phiên bản 16 cho terminal hiện tại. - `npm install -g yarn`: Cài đặt Yarn toàn cục (globally) để quản lý các gói phụ thuộc thay vì sử dụng npm mặc định.  ## 2. Clone kho lưu trữ - `git clone git@github.com:youngmonkeys/ezygrapes.git`: Sao chép kho lưu trữ ezygrapes từ GitHub về máy tính cục bộ thông qua giao thức SSH. - `cd ezygrapes`: Di chuyển vào thư mục vừa được sao chép để làm việc với dự án. ## 3. Xây dựng Ezygrapes - `yarn`: Cài đặt tất cả các phụ thuộc của dự án được liệt kê trong tệp `package.json`.  - `yarn add --dev grapesjs-cli`: Cài đặt công cụ dòng lệnh grapesjs-cli dưới dạng phụ thuộc phát triển (--dev).  - `$env:BUILD_MODULE="true"; yarn grapesjs-cli build --dts="skip" --patch=0 --targets="> 1%, ie 11, safari 8, not dead"` -- `$env:BUILD_MODULE="true"`: Thiết lập biến môi trường BUILD_MODULE là true (cú pháp này dành cho PowerShell trên Windows). -- `yarn grapesjs-cli build`: Chạy lệnh xây dựng dự án bằng grapesjs-cli. -- `--dts="skip"`: Bỏ qua việc tạo tệp khai báo TypeScript (.d.ts). -- `--patch=0`: Không áp dụng bản vá (patch) tự động. -- `--targets="> 1%, ie 11, safari 8, not dead"`: Xác định các trình duyệt mục tiêu để tối ưu hóa mã, bao gồm: các trình duyệt chiếm hơn 1% thị phần, IE 11, Safari 8, và các trình duyệt chưa bị "chết" (not dead).  ## 4. Xây dựng plugin - `cd plugins/preset-webpage`: Di chuyển vào thư mục chứa plugin preset-webpage. - `yarn`: Cài đặt các phụ thuộc của plugin được liệt kê trong tệp package.json của thư mục này.  - `yarn add node-sass --dev`: Cài đặt node-sass (một thư viện để biên dịch SCSS thành CSS) dưới dạng phụ thuộc phát triển.  - `yarn build`: Biên dịch và xây dựng plugin preset-webpage.  ## 5. Khởi động server - `yarn start`:Khởi động máy chủ phát triển (development server) để chạy dự án. Thông thường, lệnh này sẽ mở một giao diện web (thường tại localhost:8080 hoặc cổng khác tùy cấu hình) để bạn có thể xem và chỉnh sửa dự án trong trình duyệt.  - Mở trình duyệt và truy cập địa chỉ được hiển thị trong terminal (http://localhost:8080).  - Bạn có thể nhấn tổ hợp nút "CTRL C" để dừng tiến trình đang chạy. ## 6. Tóm lại Trên đây là cách để bạn có thể chạy dự án Ezygrapes cùng với plugin preset-webpage. Hy vọng với những chia sẻ trên đây giúp bạn nắm được đặc điểm và ứng dụng.