npm 包 gulp-wrap-commonjs 使用教程

阅读时长 6 分钟读完

前言

在前端开发中,许多工程化的工具包都需要使用 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

纠错
反馈