前言
在前端开发中,许多工程化的工具包都需要使用 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 进行前端开发时,我们需要先安装这个包。在命令行中操作如下:
npm install gulp-wrap-commonjs --save-dev
安装完成后,在 gulpfile.js 中配置:
const gulp = require('gulp'); const wrapCommonJS = require('wrap-commonjs'); gulp.task('wrap', () => { return gulp.src('src/**/*.js') .pipe(wrapCommonJS()) .pipe(gulp.dest('dist')); });
其中,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
使用以下命令进行下载:
npm install jquery gulp wrap-commonjs --save-dev
2.创建代码文件
我们在 src 目录下创建一个 index.js 文件,如下内容:
var $ = require('jquery'); $(function() { console.log('hello world'); });
这里我们使用 CommonJS 的规范引入了外部库 jquery,并在页面 ready 后打印了一句话。
3.配置 gulpfile.js
在 gulpfile.js 中编写以下代码:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------------ - ------------------------- ----------------- -- -- - ------ ----------------------- -------------------- ------------- - ------- -------- -- --------- -------------- --- ------------------------- --- -------------------- ---------------------
这里我们为 gulp-wrap-commonjs 指定了两个参数。dependencies 中,我们指定了 jquery 这个依赖库的名称为 jQuery,这是因为在浏览器端 window 上挂载的变量名叫 jQuery。而在 attachTo 中,我们将所有的代码都附加到 window.myApp 变量名下。这里突出了 gulp-wrap-commonjs 出色的灵活性。
4.编译代码
在终端中执行以下命令:
gulp
这个命令将会把 src 目录下所有的 js 文件进行编译处理,并输出到 dist 目录下。
5.在 HTML 页面中引用
在 HTML 页面中添加以下代码:
<script src="dist/index.js"></script>
6.运行
在浏览器中打开该页面,打开控制台,会显示出一句话 "hello world"。
总结
gulp-wrap-commonjs 是一个常用的 gulp 包,它能够帮助前端开发人员更好地处理 CommonJS 模块化规范。通过本篇文章的讲解,相信读者能够提高自己的前端开发技能,更加熟练地使用 gulp-wrap-commonjs 这个工具。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedca54b5cbfe1ea06123db