如何在React Native或JS中实现从其他文件插入代码片段以替代import？

实现方案说明 #

JavaScript/React Native 本身没有原生支持该功能的运行时函数，你需要的是构建阶段的文本插入能力，可以通过打包工具的插件实现，以下是可行方案：

• 方案1：使用babel插件实现
  可以安装babel-plugin-inline-import插件，在babel配置中指定你需要插入的文件后缀规则，配置完成后就可以在代码中直接导入文件内容，编译阶段会自动将导入语句替换为对应文件的完整内容。
  示例配置（babel.config.js）：

  module.exports = {
    plugins: [
      ["inline-import", { "extensions": [".js", ".jsx"] }]
    ]
  }
  

  代码中使用：

  import file2Content from './file2.js';
  export default function App() {
    return (
      {file2Content}
    );
  }
  

  编译后会自动把file2Content替换为file2.js的完整代码内容。

• 方案2：对应打包工具的原生能力

  • 如果使用Vite构建项目，可以直接用?raw后缀导入原始文件内容：

    import file2Content from './file2.js?raw';
    

  • 如果使用Webpack构建项目，可以安装raw-loader配置后直接导入原始文件内容。
  • 如果是React Native的Metro打包工具，可以配置metro.config.js添加对raw资源的支持，或者直接使用适配Metro的babel插件实现相同效果。

注意事项 #

这种静态插入的方案不支持动态传入文件路径，文件路径必须是编译阶段可以识别的静态字符串。如果只是为了拆分组件代码让结构更整洁，更推荐使用原生的ES模块导入导出组件的方式，更利于后续维护和tree shaking优化。

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