Tránh trùng tên định danh

Triệu chứng

Quá trình build chạy bình thường, nhưng trình duyệt ném lỗi lúc phân tích cú pháp, trước khi ứng dụng khởi động:

Để xem có bao nhiêu chunk khai báo cái tên trong thông báo lỗi, hãy đếm số tệp chứa một khai báo của nó:

-l liệt kê mỗi tệp khớp một lần và -w chỉ khớp nguyên từ, nên vmdX không bị tính. var được bỏ ra vì việc lặp lại một khai báo var tự nó không phải là lỗi. Kết quả lớn hơn 1 nghĩa là tên đó được khai báo trong nhiều hơn một chunk. Hãy thay vmd bằng tên trong thông báo lỗi của bạn.

Trùng tên định danh chỉ gây hậu quả khi các khai báo nằm chung một phạm vi. Cùng một tên lặp lại trong các mô-đun hoặc closure riêng biệt không chứng tỏ có xung đột; lỗi phân tích cú pháp ở trên mới là bằng chứng.

Vì sao điều này xảy ra

Các preset VM dùng mangled-shuffled làm Identifier Names Generator. Nó duyệt một bảng chữ cái nhỏ theo một thứ tự xáo trộn, và khi làm rối VM, mọi biến toàn cục được đổi tên đều nhận tiền tố vm (được thêm vào trước mọi identifiersPrefix mà bạn đặt, nên checkout_ trở thành vm_checkout_...). Thứ tự xáo trộn được lưu đệm theo từng tiến trình, nên các tệp được làm rối trong cùng một tiến trình, hoặc với cùng một seed cố định, sẽ lấy từ cùng một dãy: biến toàn cục đầu tiên trong mỗi tệp có chung một tên, biến thứ hai có chung một tên khác, và cứ thế tiếp tục.

Mỗi tệp được làm rối độc lập và bộ sinh bắt đầu lại từ đầu dãy của nó cho từng tệp. Khi hai tệp rơi vào cùng một phạm vi, các tên sẽ trùng nhau. Hai khai báo cấp cao nhất let vmd nằm trong cùng một phạm vi và trình phân tích cú pháp từ chối khai báo thứ hai.

Mỗi tệp được làm rối VM khai báo một tên runtime cấp cao nhất không có hậu tố, và chừng đó là đủ để gây xung đột. renameGlobals: true khiến tình hình tệ hơn nhiều: mọi khai báo cấp cao nhất trở thành một tên vm* ngắn, và các tên của chính runtime mất đi hậu tố duy nhất của chúng.

Cách khắc phục

Nên đóng gói trước, rồi làm rối bundle một lần. Nếu bạn vẫn làm rối từng tệp riêng và các script dùng chung phạm vi toàn cục, hãy chọn một trong các cách sau:

• Bật randomIdentifiersPrefix (khuyến nghị)

  Mỗi lần làm rối sẽ nhận một tiền tố ngẫu nhiên được thêm vào trước mọi định danh toàn cục (khi làm rối VM, nó thay cho tiền tố vm mặc định). Tên từ các tệp khác nhau không còn dùng chung một không gian tên, nên xung đột biến mất mà bạn không cần tự phối hợp tiền tố thủ công.

• Đặt một identifiersPrefix riêng cho mỗi tệp

  Tự truyền một tiền tố khác nhau khi làm rối từng tệp (ví dụ identifiersPrefix: 'auth_' cho một tệp, checkout_ cho tệp khác). Cách này hiệu quả nhưng dễ sai sót nếu bạn có nhiều tệp; nên ưu tiên tùy chọn ngẫu nhiên ở trên.

  JavaScript

• Chuyển identifierNamesGenerator sang hexadecimal

  Tên thập lục phân dùng một không gian khóa lớn hơn nhiều, nên khả năng hai tệp sinh ra cùng một định danh thấp hơn hẳn, nhưng tính duy nhất không được đảm bảo. Đánh đổi: định danh dài hơn so với đầu ra của mangled-shuffled, nên bundle lớn hơn một chút.

• Dùng giao diện làm rối hàng loạt nhiều tệp, hoặc kiểm tra plugin bundler của bạn

  Bảng điều khiển thêm một tiền tố riêng cho mỗi tệp trong cùng một lượt làm rối hàng loạt nhiều tệp (các gói trả phí); các tệp từ những lượt khác nhau vẫn có thể trùng tên. Nếu bạn dùng plugin bundler, hãy kiểm chứng hành vi của nó thay vì mặc định cho rằng nó cũng làm vậy. Nếu bạn tự gọi gói javascript-obfuscator hoặc API, bạn phải tự bật tiền tố.

Để kiểm chứng bản sửa, hãy build lại và tải lại ứng dụng đã gộp, rồi xác nhận rằng SyntaxError đã biến mất. Cái tên trong thông báo lỗi cũ không còn được khai báo trong nhiều hơn một chunk nữa; tiền tố làm thay đổi mọi tên được sinh ra, nên lệnh grep ở trên chỉ cho bạn biết về đúng cái tên đó, không phải về các tên mới.

Tùy chọn liên quan

• randomIdentifiersPrefix - tiền tố ngẫu nhiên cho mỗi bản dựng (khuyến nghị)
• identifiersPrefix - chuỗi tiền tố tường minh
• identifierNamesGenerator - dạng tên (mangled, hexadecimal, …)