前言
在前端开发中，许多工程化的工具包都需要使用 Node.js 平台来进行构建打包操作。其中，使用 gulp 来构建前端工程得到广泛应用。而在使用 gulp 进行前端开发的过程中，我们往往会用到一些常用的插件。本篇文章主要介绍一个常用的 gulp 插件 —— gulp-wrap-commonjs，希望能够帮你更好地使用 gulp 进行前端开发。
gulp-wrap-commonjs 介绍
gulp-wrap-commonjs 是一款非常流行的 npm 包，它能够使我们在使用 gulp 进行前端开发时更好地处理 CommonJS 模块化规范。它能够将原本 CJS 模块的文件转换成可以在浏览器端直接引用的格式，并且它非常易于使用。
gulp-wrap-commonjs 使用方法
在使用 gulp-wrap-commonjs 进行前端开发时，我们需要先安装这个包。在命令行中操作如下：
--- ------- ------------------ ----------
安装完成后，在 gulpfile.js 中配置：
----- ---- - ----------------
----- ------------ - -------------------------
----------------- -- -- -
------ -----------------------
---------------------
-------------------------
---其中，src 目录下应该是我们的源代码，而我们将处理过的代码输出到 dist 目录下。gulp-wrap-commonjs 的核心功能就是使用它的 pipe 方法处理我们的源代码。
细心的读者可能已经发现，我们在代码中已经调用了 wrapCommonJS() 方法，但是我们并没有对它传入任何参数。这是因为 gulp-wrap-commonjs 内置了许多默认的参数配置，如果不需要自行配置，使用默认的参数配置即可。
gulp-wrap-commonjs 参数配置
尽管 gulp-wrap-commonjs 内置了许多默认的参数配置，但是我们依然可以根据需要自行设置。
下面是几个比较常用的参数配置：
- separateSources: 是否将每个文件的输出文件分别存储在不同的目录中。
- sourceRoot: 指定代码中的源码根目录。
- dependencies: 设置当前模块的依赖关系。
- attachTo: 将每个文件的结果附加到指定的变量名上。
例如，我们在代码中为 gulp-wrap-commonjs 指定了一些参数：
----- ---- - ----------------
----- ------------ - -------------------------
----------------- -- -- -
------ -----------------------
--------------------
---------------- -----
----------- ------
--------- ----------
---
-------------------------
---这里我们将每个文件的输出文件分别进行存储，在每个文件的开头指定了源码根目录为 src，而且我们将处理过的代码全部附加到 myModule 变量名上。
gulp-wrap-commonjs 实际应用
下面我们通过一个实际应用案例，进一步说明 gulp-wrap-commonjs 的使用。
假设我们要开发一个简单的前端工程，该工程需要引入一个外部的库 jquery。我们需要用 CommonJS 规范来编写我们自己的代码，并在浏览器端引用。
1.安装相关的 npm 包
我们需要用到以下几个 npm 包：
- jquery
- gulp
- gulp-wrap-commonjs
使用以下命令进行下载：
--- ------- ------ ---- ------------- ----------
2.创建代码文件
我们在 src 目录下创建一个 index.js 文件，如下内容：
--- - - ------------------ ------------ - ------------------ -------- ---
这里我们使用 CommonJS 的规范引入了外部库 jquery，并在页面 ready 后打印了一句话。
3.配置 gulpfile.js
在 gulpfile.js 中编写以下代码：
----- ---- - ----------------
----- ------------ - -------------------------
----------------- -- -- -
------ -----------------------
--------------------
------------- -
------- --------
--
--------- --------------
---
-------------------------
---
-------------------- ---------------------这里我们为 gulp-wrap-commonjs 指定了两个参数。dependencies 中，我们指定了 jquery 这个依赖库的名称为 jQuery，这是因为在浏览器端 window 上挂载的变量名叫 jQuery。而在 attachTo 中，我们将所有的代码都附加到 window.myApp 变量名下。这里突出了 gulp-wrap-commonjs 出色的灵活性。
4.编译代码
在终端中执行以下命令：
----
这个命令将会把 src 目录下所有的 js 文件进行编译处理，并输出到 dist 目录下。
5.在 HTML 页面中引用
在 HTML 页面中添加以下代码：
------- -----------------------------
6.运行
在浏览器中打开该页面，打开控制台，会显示出一句话 "hello world"。
总结
gulp-wrap-commonjs 是一个常用的 gulp 包，它能够帮助前端开发人员更好地处理 CommonJS 模块化规范。通过本篇文章的讲解，相信读者能够提高自己的前端开发技能，更加熟练地使用 gulp-wrap-commonjs 这个工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedca54b5cbfe1ea06123db