React Native中能否用import()替代require()动态导入资源？

下面提供两种完全符合ESM规范、可以绕过@typescript-eslint/no-var-requires规则报错的实现方案：

方案1：常规ESM静态导入（最推荐） #

这种方案的行为和原require写法完全一致，属于静态导入，会在打包阶段完成资源处理，也支持tree shaking优化。

1. 首先确认项目tsconfig.json的compilerOptions.module配置为ESNext，适配React Native打包工具的ES模块解析规则。
2. 直接将require写法替换为静态import即可：

import foo from "../path/to/foo.png"

注意：@types/react-native已经内置了png、jpg等常用资源的类型声明，如果是自定义后缀的资源（如.svg、.ttf），可以在全局类型声明文件（比如global.d.ts）中添加对应声明，避免类型报错：

declare module "*.svg" {
  const value: import("react-native").ImageSourcePropType;
  export default value;
}

方案2：动态import()按需导入 #

如果你的场景需要按需异步加载资源，可以使用import()语法，注意该方法返回Promise，需要配合async/await或者then回调使用，资源的实际值存放在返回模块的default属性中：

// 异步加载示例
const getFooResource = async () => {
  const fooModule = await import("../path/to/foo.png");
  const foo = fooModule.default;
  // 后续使用foo的逻辑和原require写法完全一致
}

临时兼容方案 #

如果暂时需要保留旧的require写法，可以在对应文件的顶部添加注释，单独关闭当前文件的no-var-requires规则，不推荐长期使用：

/* eslint-disable @typescript-eslint/no-var-requires */
const foo = require("../path/to/foo.png")

内容的提问来源于stack exchange，提问作者uloco