前言
在前端开发中，我们常常需要引入其他第三方库来协助我们进行开发。而 npm 就是前端领域中最流行的包管理工具之一。
在 npm 上有很多非常优秀的前端工具库， broccoli-global-exporter 就是其中之一。它可以帮助我们更加方便地将全局变量打包成为一个文件，以便在浏览器中使用。在本篇文章中，我们将详细介绍如何使用 broccoli-global-exporter。
安装和使用
首先，我们需要在项目中安装 broccoli-global-exporter 这个包。在命令行中输入以下命令：
npm install --save-dev broccoli-global-exporter
安装完成后，我们就可以开始使用了。
基本用法
让我们从最基本的用法开始。
假设我们要将 window.jQuery 输出为一个单独的文件，我们可以在 Brocfile.js 中这样写：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
-- - ------------- --------- ---- ----
--- ---------- - ---------------------- -
-------- -
---------------- -----------
-
---
-------------- - -----------当我们运行 broccoli build dist 命令时， broccoli-global-exporter 会将 window.jQuery 输出为一个名为 jquery.js 的文件到 dist 文件夹下。
高级用法
除了基本用法外， broccoli-global-exporter 还有很多高级用法。
导出多个全局变量
如果我们需要将多个全局变量输出为单独的文件，我们可以这样写：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
--- ---------- - ---------------------- -
-------- -
---------------- ------------
--------------- -----------
-
---
-------------- - -----------当我们运行 broccoli build dist 命令时， broccoli-global-exporter 会将 window.jQuery 输出为一个名为 jquery.js 的文件，将 window.myLib 输出为一个名为 my-lib.js 的文件到 dist 文件夹下。
导出多个全局变量到同一个文件
有些时候，我们需要将多个全局变量输出到同一个文件中。这时，我们可以这样写：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
--- ---------- - ---------------------- -
-------- -
---------------- ----------
--------------- ---------
-
---
-------------- - -----------当我们运行 broccoli build dist 命令时， broccoli-global-exporter 会将 window.jQuery 和 window.myLib 输出到同一个名为 libs.js 的文件中，然后将该文件输出到 dist 文件夹下。
导出常量
有些时候，我们需要将常量导出为全局变量。这时，我们可以这样写：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
--- ---------- - ---------------------- -
---------- -
----------- ---
--
-------- -
----------- -------------
-
---
-------------- - -----------当我们运行 broccoli build dist 命令时， broccoli-global-exporter 会将常量 MY_CONST 输出为一个名为 my-const.js 的文件到 dist 文件夹下。
自定义导出函数
有些时候，我们需要自定义导出函数来控制输出变量的格式。这时，我们可以这样写：
-- -------------------- ---- -------
--- -------------- - ------------------------------------
-------- ------------------------------- -------- -
-- ----------
-
--- ---------- - ---------------------- -
--------- ---------------------
-------- -
---------------- -----------
-
---
-------------- - -----------我们可以在 customGlobalExporter 函数中自定义输出变量的格式，然后将该函数传递给 broccoli-global-exporter 的 exporter 选项中。当我们运行 broccoli build dist 命令时， broccoli-global-exporter 会调用 customGlobalExporter 函数，生成导出的文件。
结语
broccoli-global-exporter 是一个非常强大的工具库，它可以帮助我们更好地管理全局变量，并且提供了多种高级用法。希望本文对大家有所帮助，让大家在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde4fca