1. 简介
environment-brunch 是一个基于 Brunch JS 编译工具的 npm 包。该包允许你在编译 JavaScript 应用或网站时为不同的环境配置定制不同的变量、参数或选项。
环境变量是解决跨多个 staging、develop、production 等环境开发和测试问题中必不可少的。通过 environment-brunch 你只需要设置一次环境，然后在不同的环境中即可得到正确的变量值。
本篇博客将会详细介绍 environment-brunch 的使用教程，包括环境的设置、使用方法、示例代码等内容。
2. 安装
首先，在你的 JavaScript 应用或网站中必须已经安装了 Brunch JS。如果你尚未安装可以通过以下命令进行安装：
npm install -g brunch
接下来，安装 environment-brunch 包：
npm install environment-brunch --save-dev
3. 配置
在你的 brunch-config.js 文件中加入以下代码：
-- -------------------- ---- -------
-------- -
------------ -
--
-------
-------- ---
-------- ---
-------------
--
-
-这里默认配置为三个环境变量：develop、staging、production。你可以自定义更多的变量。
一个自定义的示例：
-- -------------------- ---- -------
-------- -
------------ -
------ -
-------- ----------------------------------- -------------------------------------------
-------- -
--------------------- -
------------ --------
------- --
-------- --------------------- -------------
--
-
--
------------ -
-------- ----------------------- --------------------- - -------- ----- ---
--
----------- -
-------- ----------------------- --------------------- - -------- ----- ---
-
-
-4. 使用
现在，你可以在你的代码中使用环境变量了。
例如，根据不同的环境设置 BASE_URL：
const env = process.env.NODE_ENV const BASE_URL = env === 'production' ? 'https://www.example.com' : 'http://localhost:3000'
还可以通过使用 environment.loaders.prepend 和 environment.loaders.append 来给不同环境添加不同的 loader。
5. 示例
一个 React 应用的示例：
-- -------------------- ---- -------
-------------- - -
-------- -
------------ -
------ ---
------------ ---
----------- ---
-
--
------ -
------------ -
------- -
------------ ----------------
--------- -------------
--
--
------------ -
------- -
---------- -------------
-
-
--
---------- -
----------- -
--------- -----
----------- ------
-------- -
----------- -
-------- -----
-
-
--
------------ -
--------- ------
----------- -----
-------- -
----------- -
-------- ----
-
-
--
------ -
----------- -----
-------- -
----------- -
-------- ----
-
-
--
--
-6. 总结
environment-brunch 是一个方便实用的 npm 包，在使用 Brunch JS 编译工具时非常有用。使用该包可以方便地为不同环境设置不同的变量、参数、选项等。在实际开发中，你只需要根据你所使用的环境设置一下即可。本篇博客详细介绍了该包的安装、配置和使用方法，并提供了一个 React 应用的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecf30