时间戳

首页 > 解决方案 > 在 babel 构建阶段传递环境变量以导入不同的文件

react-native - 在 babel 构建阶段传递环境变量以导入不同的文件

问题描述

我正在为一个项目构建一个网络（react带有webpack& babel）和移动应用程序（react-native带有expo）。因此，我为业务逻辑和 redux/api 库创建了一个通用库。

Web 和移动设备之间的某些代码会略有不同。在我的情况下，它是 localStorage 与 AsyncStorage，我将其用于身份验证等......

我正在尝试为构建阶段传递一个环境变量以切换某些文件的导入，以便为每个构建加载正确的文件，这些构建只是路径链接（即我的库没有预构建，我只是这样做import '../mylib'）例如：

if(PLATFORM === 'mobile'){
   import StorageModule from './mobile-storage-module`
} else {
   import StorageModule from './mobile-storage-module`
}
export default StorageModule

试试 1

@babel/preset-env说它是移动的还是网络的，以便它根据构建导入不同的库，如下所示：

我的.babelrc有这个：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "platform": "mobile"
      }
    ]
  ]
}

然后在本地存储文件中我这样做：

export default () => {
    const platform = process.env.platform
    if (platform === 'mobile') {
        return import './storage-modules/storage-mobile'
    }
    return import './storage-modules/storage-web'
}

那不起作用，这对我也不起作用。

试试 2

我安装了react-native-dotenv并创建了一个.env文件： PLATFORM=mobile 并将插件设置在我的.babelrc：

{
  "presets": [
    "babel-preset-expo",
    "react-native-dotenv"
  ]
}

在我的示例文件中，我尝试了这个：

import { PLATFORM } from 'react-native-dotenv'
export default PLATFORM === 'mobile' ? import './storage-modules/storage-mobile' : import './storage-modules/storage-web'

但是现在我的构建不起作用。知道如何在构建过程中进行动态导入，适用于 react-native 应用程序和 webpack 构建中的 babel（也使用 babel）吗？

标签： react-nativewebpackbabeljs

解决方案

首先，@babel/preset-env不做你认为它做的事。这不是用于指定您自己的变量，它是一个插件，可以为您想要支持的浏览器自动使用正确的目标和 pollyfills。

获取环境变量的最简单方法是使用 webpack 定义插件（它是 webpack 的一部分，因此无需安装任何额外的东西）

只需将其添加到您的 webpack 配置中。

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            platform: 'mobile',
        },
    }),
],

接下来，您不能import在 ifs 中使用普通语句。 import在任何代码运行之前得到解决，无论是通过 webpack 构建，还是在脚本加载的支持环境中。要在运行时导入某些内容，您需要使用动态导入。

这是一个看起来如何的示例。

export default new Promise(async resolve => {
    resolve(
        process.env.platform === 'mobile'
            ? (await import('./mobile.js')).default
            : (await import('./desktop.js')).default
    );
});

您现在可以像往常一样从此文件导入，但请注意默认导出是一个承诺。

推荐阅读