Package Exports Support in React Native

Với việc phát hành React Native 0.72 , Metro — công cụ xây dựng JavaScript của chúng tôi — hiện bao gồm hỗ trợ beta cho package.json "exports"lĩnh vực này. Khi được bật , nó sẽ thêm chức năng sau:

• Các dự án React Native sẽ hoạt động với nhiều gói npm hơn
• Các khả năng mới cho các gói để xác định API của chúng và nhắm mục tiêu React Native
• Một số thay đổi đột phá đối với độ phân giải gói (trong các trường hợp cạnh)

Trong bài đăng này, chúng tôi sẽ đề cập đến cách hoạt động của Package Exports và ý nghĩa của những thay đổi này đối với bạn với tư cách là nhà phát triển ứng dụng React Native hoặc người bảo trì gói.

Package Exports là gì?

Được giới thiệu trong Node.js 12.7.0, Package Exports là cách tiếp cận hiện đại dành cho các gói npm để chỉ định các điểm vào — ánh xạ của các đường dẫn con gói có thể được nhập từ bên ngoài và (các) tệp nào chúng sẽ phân giải thành.

Hỗ trợ "exports"cải thiện cách các dự án React Native sẽ hoạt động với hệ sinh thái JavaScript rộng lớn hơn ( được sử dụng trong ~16,6 nghìn gói hiện nay ) và cung cấp cho tác giả gói một bộ tính năng được tiêu chuẩn hóa cho các gói đa nền tảng để nhắm mục tiêu React Native.

"exports"có thể được sử dụng bên cạnh hoặc thay vì "main"trong một package.jsontệp.

{
  "name": "@storybook/addon-actions",
  "main": "./dist/index.js",
  ...
  "exports": {
    ".": {
      "node": "./dist/index.js",
      "import": "./dist/index.mjs",
      "default": "./dist/index.js"
    },
    "./preview": {
      "import": "./dist/preview.mjs",
      "default": "./dist/preview.js"
    },
    ...
    "./package.json": "./package.json"
  }
}

Đây là một số mã ứng dụng sử dụng gói trên bằng cách nhập các đường dẫn con khác nhau của @storybook/addon-actions.

import {action} from '@storybook/addon-actions';
// -> '@storybook/addon-actions/dist/index.js'

import {action} from '@storybook/addon-actions/preview';
// -> '@storybook/addon-actions/dist/preview.js'

import helpers from '@storybook/addon-actions/src/preset/addArgsHelpers';
// Inaccessible - not listed in "exports"!

Các tính năng nổi bật của Xuất khẩu trọn gói là:

• Đóng gói gói : Chỉ "exports"có thể nhập các đường dẫn con được xác định trong từ bên ngoài gói — trao cho các gói quyền kiểm soát đối với API công khai của chúng.
• Bí danh đường dẫn phụ : Các gói có thể xác định các đường dẫn phụ tùy chỉnh ánh xạ tới một vị trí tệp khác (bao gồm thông qua các mẫu đường dẫn phụ ) — cho phép di chuyển tệp trong khi vẫn duy trì API công khai.
• Xuất có điều kiện : Một đường dẫn phụ có thể phân giải thành một tệp cơ bản khác tùy thuộc vào môi trường. Ví dụ: để nhắm mục tiêu "node", "browser"hoặc "react-native"thời gian chạy — thay thế "browser"trường spec .

Dành cho nhà phát triển

Tính năng Package Exports có thể được kích hoạt ngay hôm nay, ở phiên bản beta.

• Nhập đối với các gói phụ thuộc vào các tính năng Package Exports (chẳng hạn như Firebase và Storybook ) hiện sẽ hoạt động như thiết kế.
• Giờ đây, các dự án React Native cho Web sử dụng Metro sẽ có thể sử dụng "browser"tính năng xuất có điều kiện, loại bỏ nhu cầu về giải pháp thay thế.

Kích hoạt tính năng Package Exports sẽ mang đến một số thay đổi đột phá về trường hợp cạnh có thể ảnh hưởng đến các dự án cụ thể và bạn có thể thử nghiệm ngay hôm nay .

Trong bản phát hành React Native trong tương lai, Package Exports sẽ được bật theo mặc định . Trong tình huống con gà và quả trứng, các ứng dụng React Native trước đây là nơi giữ lại một số gói để di chuyển đến "exports"— hoặc sử dụng "react-native"lối thoát trường gốc của chúng tôi. Hỗ trợ các tính năng này trong Metro sẽ cho phép hệ sinh thái phát triển.

Di chuyển "exports"

Việc thêm một "exports"trường vào gói của bạn là hoàn toàn tùy chọn . Các tính năng giải quyết gói hiện tại sẽ hoạt động giống hệt nhau đối với các gói không sử dụng "exports"— và chúng tôi không có kế hoạch loại bỏ hành vi này.

Chúng tôi tin rằng các tính năng mới "exports"cung cấp một bộ tính năng hấp dẫn cho những người duy trì gói React Native.

• Thắt chặt API gói của bạn : Đây là thời điểm tuyệt vời để xem xét API mô-đun của gói của bạn, API này hiện có thể được xác định chính thức thông qua các bí danh đường dẫn phụ đã xuất. Điều này ngăn người dùng truy cập các API nội bộ, giảm diện tích bề mặt cho các lỗi.
• Xuất có điều kiện : Nếu gói của bạn nhắm mục tiêu React Native cho Web (tức là "react-native"và "browser"), thì giờ đây, chúng tôi cấp cho các gói quyền kiểm soát thứ tự giải quyết của các điều kiện này (xem tiêu đề tiếp theo).

Nếu bạn quyết định giới thiệu "exports", chúng tôi khuyên bạn nên coi đây là một thay đổi đột phá . Chúng tôi đã chuẩn bị hướng dẫn di chuyển trong tài liệu Metro bao gồm cách thay thế các tính năng, chẳng hạn như tiện ích mở rộng dành riêng cho nền tảng.