Tại sao các thuộc tính HTML được đặt khác nhau trong DOM?

Sau khi đào vài giờ, chúng tôi quyết định đưa ra một câu hỏi về SO, hy vọng rằng ai đó có thể giúp đỡ về vấn đề sau.

Đối với một trong những ứng dụng web của chúng tôi, chúng tôi đã sử dụng khung js UI UI với thư viện hỗ trợ React của nó
Khi chúng tôi cố gắng kết xuất ứng dụng trên môi trường dev của mình, mọi thứ dường như hoạt động bình thường, nhưng khi chúng tôi thử nó trên môi trường dàn dựng của chúng tôi, một số thành phần hoạt động khác

Những gì chúng tôi tìm thấy cho đến nay : dường như trên môi trường dàn dựng của chúng tôi, một số thuộc tính HTML được đặt khác nhau trong DOM:

|----------------|---------------|--------------|
| HTML attribute |    DEV ENV    | STAGING ENV  |
|----------------|---------------|--------------|
| fixed-content  | fixed-content | fixedcontent |
|----------------|---------------|--------------|
| active-index   | active-index  |     index    |
|----------------|---------------|--------------|

Do đó, khung Onsen có thể tìm thấy các thuộc tính trên Các phần tử HTML và hoạt động khác nhau bất kể:

Chúng tôi sử dụng cùng một trình duyệt (được kiểm tra với Chrome, Edge, Firefox)
Chúng tôi có cùng mã JS được tải trên cả hai envs

Sự khác biệt giữa các envs:

Các tệp JS được lưu trữ cục bộ trên các máy dev của chúng tôi và trên S3 cho env dàn dựng của chúng tôi.
Chúng tôi sử dụng một kết nối được mã hóa trên env dàn dựng của chúng tôi
Tiêu đề Chấp nhận mã hóa nằm gzip, deflatetrên cục bộ và gzip, deflate, brtrên màn hình
Có lẽ một cái gì đó khác để tìm kiếm?

Có ai biết cái quái gì đang xảy ra ở đây không?

— Mihai Matei
nguồn

Bạn có bất kỳ cơ hội nào khi sử dụng phiên bản React với API API góc hoặc cơ sở không? Do phiên bản JS và góc có vẻ sử dụng nội dung cố định làm thuộc tính, nhưng phiên bản React sử dụng renderFixed làm thuộc tính. Hoặc bạn đang sử dụng nó một cách chính xác và thẻ Reacjs của câu hỏi này chỉ là sai lệch?

— Shilly

Vì vậy, onsen ui có một lõi js thuần túy với một thư viện phản ứng trên nó. Chúng tôi sử dụng 2 cái này trong ứng dụng của mình

— Mihai Matei

Bạn có tiền tố các thuộc tính với data-*?

— Brett Gregson

Thực tế, onsen ui framerwork xử lý tất cả mọi thứ, nhưng theo như tôi thấy, họ không sử dụng các bộ dữ liệu

— Mihai Matei

Chúng tôi thực sự đã tìm ra vấn đề và giải pháp khá đơn giản mặc dù chúng tôi phải mất hàng giờ để tìm ra nó.

Trên môi trường dàn dựng / sản xuất của chúng tôi, chúng tôi sử dụng plugin babel transform-react-remove-prop-typesđể loại bỏ các loại prop React.

Thật không may, thư viện hỗ trợ UI UI React phụ thuộc vào các loại prop được xác định bởi các thành phần của nó, vì vậy khi chúng bị tước, thư viện bắt đầu hoạt động khác đi.

Những gì chúng ta đã làm:

Chúng tôi đã cập nhật plugin babel lên phiên bản 0.3.3để có thể sử dụng ignoreFilenamestùy chọn

Chúng tôi đã bỏ qua tập tin chứa mã của thư viện React UI UI

if (cli.production) {
    config.babel.plugins.push([
        'transform-react-remove-prop-types',
        {
            ignoreFilenames: ['projectleader']
        }
    ]);
}

— Mihai Matei
nguồn