Sử dụng thư mục kết xuất tùy chỉnh khi sử dụng ứng dụng create-react-app

Question

Facebook cung cấp create-react-appcommand để tạo ứng dụng phản ứng. Khi chúng tôi chạy npm run build, chúng tôi thấy đầu ra trong thư mục /build.

NPM chạy build

xây dựng các ứng dụng phục vụ sản xuất để xây dựng thư mục. Nó chính xác gói Phản hồi trong chế độ sản xuất và tối ưu hóa bản dựng cho hiệu suất tốt nhất .

Bản dựng được rút gọn và tên tệp bao gồm băm. Ứng dụng của bạn đã sẵn sàng để được triển khai!

Làm cách nào chúng tôi có thể sử dụng thư mục tùy chỉnh thay vì /build cho đầu ra? Cảm ơn.

Answer 1

Bạn không thể thay đổi tên thư mục đầu ra xây dựng bằng các tùy chọn cấu hình hiện tại.

Hơn nữa, bạn không nên. Đây là một phần của the philosophy behind react-create-app: họ nói Công ước qua Cấu hình.

Nếu bạn thực sự cần phải đổi tên thư mục của bạn, tôi thấy hai lựa chọn:

1. Ngay sau khi quá trình xây dựng hoàn thành, viết một lệnh mà bản xây dựng thư mục nội dung vào thư mục khác, bạn muốn. Ví dụ: bạn có thể try the copyfiles npm package hoặc bất kỳ thứ gì tương tự.

2. Bạn có thể thử eject react-create-app và tinh chỉnh cấu hình.

   Nếu bạn không hài lòng với công cụ tạo và lựa chọn cấu hình, bạn có thể đẩy bất cứ lúc nào. Lệnh này sẽ loại bỏ sự phụ thuộc xây dựng duy nhất từ ​​dự án của bạn.

   Thay vào đó, nó sẽ sao chép tất cả các tệp cấu hình và phụ thuộc chuyển tiếp (Webpack, Babel, ESLint, v.v.) ngay vào dự án của bạn để bạn có toàn quyền kiểm soát chúng. Tất cả các lệnh trừ eject sẽ vẫn hoạt động, nhưng chúng sẽ trỏ đến các script đã sao chép để bạn có thể chỉnh sửa chúng. Tại thời điểm này bạn đang ở trên của riêng bạn.

   Tuy nhiên, điều quan trọng cần lưu ý là đây là thao tác một chiều. Khi bạn đã thoát ra, bạn không thể quay lại! Bạn mất tất cả các bản cập nhật trong tương lai.

Do đó, tôi muốn khuyên bạn không sử dụng một cách đặt tên thư mục tùy chỉnh, nếu có thể. Cố gắng gắn bó với tên mặc định. Nếu không phải là một tùy chọn, hãy thử # 1. Nếu nó vẫn không hoạt động đối với trường hợp sử dụng cụ thể của bạn và bạn thực sự không còn lựa chọn - hãy khám phá # 2. Chúc may mắn!

Answer 2

Bạn có thể cập nhật các cấu hình với một ít hack, dưới thư mục gốc của web site:

1. NPM chạy eject
2. config/webpack.config.prod.js - dòng 61 - thay đổi đường dẫn đến: __dirname + './ ../ - thư mục của bạn của choice-- '
3. config/paths.js - dòng 68 - cập nhật cho resolveApp (' ./-- thư mục của bạn của choice-- ')

thay thế thư mục --Thông of choice-- với thư mục thư mục bạn muốn nó được tạo trên

lưu ý đường dẫn mà tôi đã cung cấp có thể hơi bẩn, nhưng đây là tất cả những gì bạn cần làm để sửa đổi cấu hình.

Answer 3

Sửa package.json của bạn:

"build": "react-scripts build && mv build webapp"