前言
在前端开发过程中，我们经常需要进行配置，尤其是在开发 React Native 项目时。@expo/config 是一个方便我们管理和修改项目配置的 npm 包。本文将介绍如何使用 @expo/config，包括安装过程、使用方法和实战案例。
安装
使用 @expo/config 需要先安装 Expo CLI：
npm install -g expo-cli
然后，在项目根目录下安装 @expo/config 依赖：
npm install @expo/config
安装完成后，我们可以使用 @expo/config 进行项目配置。
使用方法
配置项目信息
在项目根目录创建一个名为 app.config.js 的文件，然后可以使用 module.exports 向外暴露配置信息：
module.exports = {
name: 'MyApp',
slug: 'my-app',
extra: {
env: process.env.NODE_ENV || 'dev'
}
}其中 name 是应用程序的名称，slug 是应用程序唯一标识符。extra 包含一些应用程序需要的其他信息，如环境变量等。
修改 App.json
在 Expo 项目中，还有一个 app.json 文件用来存储应用程序的配置信息。我们可以使用 @expo/config 修改此文件。
在项目根目录创建一个名为 app.config.js 的文件，然后向此文件中添加如下内容：
const { withExpoConfig } = require('@expo/config');
module.exports = withExpoConfig({
// 配置信息
});通过调用 withExpoConfig 方法，我们可以获取到 app.json 文件的信息，并根据需要修改其内容：
-- -------------------- ---- -------
-------------- - ----------------
----- --------
----- ---------
------ -
---- -------------------- -- -----
--
---- -
--------------- -----
----------------- ---------------
--
-------- -
-------- --------------------
------------ -
-
---在 ios 属性中，我们可以设置应用程序是否支持平板电脑，并指定 Bundle 标识符；在 android 属性中，我们可以设置应用程序的包名，以及版本号。这些配置信息将被编译到应用程序中。
修改 Webpack 配置
有时候在 React Native 开发中我们需要自定义 Webpack 配置，例如自定义别名、增加 loader 等。@expo/config 也提供了相应的配置项，实现自定义 Webpack 配置。
在 app.config.js 文件中添加如下内容：
-- -------------------- ---- -------
----- - -------------- - - ------------------------
----- ---- - ----------------
-------------- - ----------------
----- --------
----- ---------
------ -
---- -------------------- -- -----
--
---- -
--------------- -----
----------------- ---------------
--
-------- -
-------- --------------------
------------ -
--
-------- ------ -- -
-- -----
-------------------- - -
------------------------
---- ----------------------- -------
--
------ -------
-
---在 webpack 属性下，我们可以使用普通的 Webpack 配置项修改 Webpack 配置。此处我们设置了 resolve.alias，增加了一个别名解析 @，指向 src/ 目录。
实战案例
假设我们在开发 Expo 项目时，需要引入 ENV 配置文件。其中 development.env 用来存储开发阶段的配置信息，production.env 用来存储生产环境下的配置信息。
// development.env API_URL=http://localhost:3000/api
// production.env API_URL=https://api.example.com
我们可以在项目根目录下创建一个名为 env.js 的文件，用来获取不同环境下的配置信息：
-- -------------------- ---- -------
------ --------- ---- -----------------
------ - -- ------ ---- ---------
----- ---------- - ---- - ------------------------- -- -
--- -------
------ --------- -
---- ------
---- --------------
------ - -
-------- ----------- -- --
--
------
---- -------
---- -------------
------ - -
-------- ----------- -- --
--
------
--------
------ - ---
------
-
------ -------
--
----------------
----- ------- - -------------
------ ------- -
-----------
--------------
--在 getEnvVars 方法中，我们根据传入的 env 参数，判断需要获取的配置信息。同时，在 env.js 文件中，我们使用了 dotenv 库将 .env 文件的信息读取到 process.env 中，以便获取配置信息。
在 app.config.js 文件中，我们可以将 env.js 文件导入，并将 env 包含在 extra 中：
-- -------------------- ---- -------
----- - -------------- - - ------------------------
----- --- - --------------------
-------------- - ----------------
----- --------
----- ---------
------ -
----
---
--
---
---这样，在项目中，我们就可以像这样引用环境变量：
import env from '../env.js'; console.log(env.API_URL); // 打印当前环境下的 API_URL
总结
通过本文的介绍，我们可以看出 @expo/config 的强大功能。使用它，我们可以方便地管理和修改 Expo 项目的配置信息。希望这篇文章对你有帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabc9b5cbfe1ea0610849