模块化开发
一、模块内部可以使用exports对象进行成员导出,使用require方法导入其他模块
实验:
- 新建一个js文件,命名为 module-a.js
const add = (n1,n2) => n1+n2;
exports.add = add;
- 再新建一个js文件,命名为 module-b.js
const a = require("./03-module-a"); //导入时,.js后缀名可以省略
console.log(a.add(10, 20));
- 在当前文件夹下按住shift右击——选择‘在此处打开powershell窗口’——输入 node ./module-b.js
回车——输出30
PS: 在-a文件中定义了add加法函数,并用exports导出,在-b文件中通过require导入-a文件,并调用add函数
二、模块成员导出的另一种方式-module.exports
exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准
- 新建 04-module.exports.js 文件
const greeting = (name) => `hello ${name}`;
module.exports.greeting = greeting;
- 新建04-require.js文件
const a = require("./04-module.exports");
console.log(a.greeting("zoro"));
- 在当前文件夹下按住shift右击——选择‘在此处打开powershell窗口’——输入 node ./04-require.js
回车 - 结果展示
三、第三方模块 nodemon
nodemon 是一个命令行工具,每次修改文件后,命令行工具自动重新执行该文件
使用步骤:
- 使用 npm install nodemon -g 下载
- 在命令行工具中用 nodemon 命令替代node命令执行文件
四、第三方模块 nrm
nrm : npm 下载地址切换工具。npm默认的下载地址在国外
使用步骤:
- 使用 npm install nrm -g 下载
- 查询可用下载地址列表 —— 输入 nrm ls
- 切换npm下载地址——nrm use taobao
切换成功后,*改为taobao前面。修改成功后,下载速度会变快
五、第三方模块 gulp
基于node平台开发的前端构建工具。将机械化操作编写成任务,想要执行机械化操作时执行一个命令行命令任务就能自动执行了,提高开发效率。
作用:
- 项目上线,HTML、CSS、JS文件压缩合并
- 语法转换(es6、less…)
- 公共文件抽离
- 修改文件浏览器自动刷新
方法:
- gulp.dest(): 输出文件
- gulp.task(): 建立gulp任务
- gulp.watch():监控文件的变化
- gulp.src(): 获取任务要处理的文件
插件:
-
gulp-htmlmin : html压缩
-
gulp-csso : 压缩css
-
gulp-babel : JavaScript 语法转换
-
gulp-less : less语法转化
-
gulp-uglify : 压缩混淆JavaScript
-
gulp-file-include : 公共文件包含
-
browsersync : 浏览器实时同步
使用:
- 使用 npm install gulp 下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构src目录放源代码文件,dist目录放构建后文件
- 在gulpfile.js文件中编写任务
- 在命令行工具中执行gulp任务