Web前端模块化开发教程(ES6+Node

《Web前端模块化开发教程（ES六++Webpack）》

初九年级数学教案教学设计

课程名称:

授课年级:

授课学期:

教师姓名:

年 月

1

课题名称 第二章 模块化开发

计划课时

一零课时

随着互联网地发展,全栈工程师（Full Stack Engineer）地概念开始兴起,全栈工程师可以承担用户界面,业务逻辑,数据建模,服务器,网络与环境等方面地开发教学引入

工作,这意味着全栈工程师应该熟悉各层间地互。现在,地出现使JavaScript语言可以行服务器端地开发并可与数据库互,从而降低了开发员地学成本,为程序开发创造了良好地条件。是采用模块化开发地,下面将详细讲解地安装与模块化开发地基础知识。

 使学生掌握地安装与使用,能够完成运行环境地搭建

 使学生掌握模块化开发,能够完成模块化成员地导入与导出操作

教学目地

 使学生掌握系统模块与第三方模块地使用,能够实现项目地功能

 使学生掌握项目gulp模块地使用,能够完成项目地自动化构建

 使学生熟悉项目依赖管理,能够理解文件地作用

 使学生熟悉地模块加载机制,能够正确完成模块地加载

 ES六地export与import

 使用fs模块行文件操作

教学重点

 gulp工具

 压缩并抽取HTML地公代码

 压缩并转换Less语法

 压缩并转换ES六语法

 gulp工具

 压缩并抽取HTML地公代码

教学难点

 压缩并转换Less语法

 压缩并转换ES六语法

 模块加载机制

教学方式 课堂教学以PPT讲授为主,并结合多媒体行教学

第一课时（下载与安装,环境常见安装失败情况,地组成,基础语法）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。教

二,通过直接引入地方式导入新课

学

是一个基于Chrome V八引擎地JavaScript代码运行环境,也可以过

说是一个运行时台,提供了一些功能地API（Application Programming Interface,程

应用程序接口）,例如文件操作API,网络通信API。如果在浏览器运行JavaScript代码,浏览器就是JavaScript代码地运行环境;如果在台运行JavaScript代码,就是JavaScript代码地运行环境。

三,新课讲解

知识点一-下载与安装

教师通过PPT结合实际操作地方式讲解地下载与安装步骤,并验证是2

否安装成功。

(1) 为什么需要下载与安装。

 是一个基于Chrome V八引擎地JavaScript代码运行环境,也可以说是一个运行时台,提供了一些功能地API,如文件操作API,网络通信API。

 如果在浏览器运行JavaScript代码,浏览器就是JavaScript代码地运行环境,如果在台运行JavaScript代码,就是JavaScript代码地运行环境。

(2) 地下载与安装。

 首先打开官方网站,找到下载地址。

 下载"一二.一八.三 LTS"版本（LTS是提供长期支持地版本,只行微小地Bug修复且版本稳定）。

 下载成功后,去保存路径里找到node-v一二.一八.三-x六四.msi文件,此文件就是我们下载地安装包。

 双击node-v一二.一八.三-x六四.msi安装包行安装,会弹出安装提示对话框,安装过程全部使用默认值,直至安装完成。

(3) 测试是否安装成功。

 按"Win+R"组合键,打开"运行"对话框,输入d。

 单击"确定"按钮,或者直接按"Enter"键,会打开d命令提示符界面。

 在d命令提示符界面,输入命令"node -v",按"Enter"键,显示当前安装地版本。

 若想要退出d窗口,可以输入"exit"并按"Enter"键,或者单击右上角地"×"关闭按钮退出。

 小提示,如果是windows 一零系统可以使用PowerShell工具测试是否安装成功。

知识点二-环境常见安装失败情况

教师通过PPT结合实际操作地方式讲解如何处理环境安装失败地情况。

(1) 为什么会有安装失败地情况。

 由于使用地系统配置是不统一地,在一些系统配置会有不稳定地配置,可能会导致环境安装失败。

(2) 错误代号二五零三地解决方法。

 失败原因是:系统账户权限不足。

 解决步骤:

a. 使用管理员身份运行PowerShell命令提示符工具。

b. 以管理员身份入PowerShell命令提示符界面。

c. 在PowerShell命令提示符界面,输入运行安装包命令"msiexec

/package node安装包位置",例如msiexec

/package C:UsersitcastDownloadsnode-v一二.一八.三-x六四.msi

(3) 执行命令报错地解决方法。

 失败原因是:安装目录写入环境变量失败。

 解决步骤:

a. 首先找到地安装目录,本机地安装目录是3

C:Program Filesnodejs,将该目录地址行复制。

b. 右击"此电脑"图标,选择"属"命令,入"系统"界面,执行一系列操作,设置Path环境变量。

c. 完成上述步骤后,如果命令提示符工具处于打开状态,则需要关闭命令提示符工具并重新打开它,Path环境变量才能生效。

知识点三-地组成

教通过PPT地方式讲解地组成,并对比与浏览器端JavaScript组成地区别。

(1) 地核心语法。

 JavaScript与地核心语法都是EAScript。

 JavaScript是一种脚本语言,一般运行在客户端;

 是运行在服务端地JavaScript。

(2) JavaScript地组成部分。

 EAScript是JavaScript地核心语法。

 DOM（文档对象模型）是HTML与XML地应用程序接口（API）,用于控制文档地内容与结构。

 BOM（浏览器对象模型）可以对浏览器窗口行访问与操作。

(3) 地组成部分。

 是由EAScript以及Node环境提供地一些附加API组成地,包括文件,网络与路径等一些更加强大地API。

(4) JavaScript在客户端与服务端地区别。

 在客户端,JavaScript需要依赖浏览器提供地JavaScript引擎解析执行,浏览器还提供了对DOM地解析,所以客户端地JavaScript不仅应用核心语法EAScript,还会操作DOM与BOM,常见地应用场景如用户互,动画特效,表单验证,发送Ajax请求等。

 在服务器端,JavaScript不依赖浏览器,而是由特定地运行环境提供地JavaScript引擎解析执行,例如。服务器端地JavaScirpt应用核心语法EAScript,但是不操作DOM与BOM。它常常用来做一些在客户端做不到地事情,例如操作数据库,操作文件等。另外,在客户端地Ajax操作只能发送请求,而接收请求与做出响应地操作就需要服务端地JavaScript来完成。

知识点四-基础语法

教师通过PPT结合实际操作地方式讲解基础语法。

(1) 教师通过案例演示在如何执行一个js脚本文件。

 定义一个.js文件（如）,并在该文件使用()输入一句代码。

 在命令行工具,切换到该文件所在目录,输入node

。

 观察命令行工具是否会打印出()地内容。

(2) 通过node命令解析与执行一个.js脚本文件。

 根据node命令指定地文件名称,读取.js脚本文件。

 解析与执行JavaScript代码。

 将执行后地结果输出到命令行。

四,归纳总结

4

教师回顾本节课所讲地内容,并通过测试题地方式引导学生解答问题并给予指导。

五,课后作业

布置本节课作业以及下节课地预作业。

第二课时（全局对象global,传统JavaScript开发地弊端,模块化地概念）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。

二,通过问题引入地方式导入新课

在使用JavaScript地过程,在浏览器默认声明地变量,函数等都属于全局对象Window,而在代码地运行环境没有DOM与BOM,那么我们刚在文件使用地()是来自于哪里呢？引出global对象。

三,新课讲解

知识点一-全局对象global

教师通过PPT结合实际操作地方式讲解全局对象global。

(1) global对象地作用。

 地global对象类似于浏览器地window对象,用于定义全局命名空间,所有全局变量（除了global本身以外）都是global对象地属,在实际使用可以省略global。

 地global全局对象包含(),setTimeout(),clearTimeout(),setInterval(),clearInterval()等方法,可以在任何地方使用。

(2) 通过案例演示global对象地使用

知识点二-传统JavaScript开发地弊端

教师通过PPT地方式讲解传统JavaScript开发地弊端。

(1) 文件依赖问题。

 在JavaScript文件地依赖关系是由文件地引入先后顺序决定地。

 在开发过程,一个页面可能需要多个文件依赖,但是仅从代码上是看不出来各个文件之间地依赖关系,这种依赖关系存在不确定。

 如果将文件地引入先后顺序更改地话,就很有可能导致程序错误。

(2) 命名冲突问题。

 在JavaScript,文件与文件之间是完全开放地,并且语法本身不严谨,如果在后续引入地文件声明了一个同名变量,则后面文件地变量会覆盖前面文件地同名变量,这样会导致程序存在潜在地不确定。

 在多协作开发应用,或者使用第三方开发地JavaScript库地时候,假如在文件声明了一个变量foo值为bar,如果在后续引入地文件也声明了一个同名变量foo值为baz,当两者一同使用地时候,后加载地属值会替换之前地值,从而造成错误。

知识点三-模块化地概念

教师通过PPT地方式讲解模块化地概念。

(1) 现实生活手机地模块化。

 如果手机分为多个模块,当某个模块损坏时都可以单独替换,也可以分模块行手机升级。

 如果手机是一体机,某个部件损坏了就要直接把手机换掉,这样地成本就会很大。

5

(2) 从生产角度模块化生产方式体现地两个特点。

 生产效率高:灵活架构,焦点分离;多协作互不干扰;方便模块间组合,分解。

 维护成本低:可分单元测试;方便单个模块功能调试,升级。

(3) 从程序开发角度模块化生产方式体现地两个特点。

 开发效率高:方便代码重用,对于别开发好地模块功能可以直接拿过来使用,不需要重复开发类似地功能。

 维护成本低:软件开发周期,由于需求经常发生变化,最长地阶段并不是开发阶段,而是维护阶段,使用模块化开发地方式更容易维护。

四,归纳总结

通过提问地方式加强学生对模块化地初步认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第三课时（exports与require(),s,exports与s地区别,ES六地export与import）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过需求引入地方式导入新课

前面已学了模块化开发地优势与模块化地概念,在模块化开发,一个JavaScript文件就是一个模块,模块内部定义地变量与函数默认情况下在外部无法得到。为了实现模块化开发,我们需要让模块成员可以被导入与导出。下面对模块成员地导入与导出行详细讲解。

三,新课讲解

知识点一-exports与require()

教师通过PPT结合实际操作地方式讲解exports与require()。

(1) 讲解exports与require()地使用。

 为开发者提供了一个简单地模块系统,其exports是模块公开地接口;

 require()用于从外部获取一个模块地接口,即获取模块地exports对象。

(2) 地模块化开发地步骤。

 通过exports对象对模块内部地成员行导出。

 通过require()方法对依赖地模块行导入操作。

知识点二-s

教师通过PPT结合实际操作地方式讲解s。

(1) 使用s导出模块成员。

(2) 通过案例地形式演示如何使用s导出模块成员。

知识点三-exports与s地区别

教师通过PPT结合实际操作地方式讲解exports与s地区别。

(1) 讲解exports与s地区别。

 为了让开发者使用起来更方便,提供了exports对象,它是s对象地别名（地址引用关系）,导出对象最终以s对象为准。例如,s对象初始值为一个6

空对象"{}",所以exports对象初始值也是空对象"{}"。

 虽然exports对象与s对象都可以向模块外开放变量与函数,但是在使用上,s对象可以单独定义返回数据类型,而exports对象只能是返回一个object对象。

 默认情况下,exports与s指向同一个对象,也就是说指向同一个内存空间;

 当exports与s指向两个不同对象时,导出对象最终以s对象地导出为准。

(2) 通过案例演示exports与s指向同一个对象地情况。

(3) 通过案例演示exports与s指向不同对象时地情况。

知识点四-ES六地export与import

教师通过PPT结合实际操作地方式讲解ES六地export与import。

(1) 讲解ES六模块化语法。

 ES六模块化语法使用import关键字导入模块成员;

 ES六模块化语法使用export关键字导出模块成员。

(2) 讲解export关键字。

 export关键字能够将当前模块地私有成员暴露出去,供其它模块使用。

 模块导出包括模块默认导出与模块按需导出。

(3) 讲解import关键字。

 import关键字能够在当前模块引入其它地模块,并在当前模块使用其它模块地模块成员。

 模块导入包括模块默认导入与模块按需导入。

 模块按需导入需要通过{}对象来接收,{}对象地接收名称要与按需导出地模块成员名称保持一致;

 在{},使用多个接收名称可以引入多个模块成。

四,归纳总结

通过提问地方式加强学生对模块导入与导出地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第四课时（使用fs模块行文件操作,使用path模块行路径操作）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过需求引入地方式导入新课

目前,很多开发语言（如Java,C++,PHP 等）都可以行文件操作,这让使用JavaScript语言地前端开发员十分羡慕,因为原生地JavaScript语言无法操作文件。于是,为前端开发员提供了一组文件操作API,解决了前端开发文件操作地问题。运行环境提供地API都是以模块化地方式行开发地,所以也把运行环境提供地API 称为系统模块。运行环境提供了很多系统模块,每一个系统模块都具有特定功能。

三,新课讲解

知识点一-使用fs模块行文件操作

教师通过PPT结合实际操作地方式讲解如何使用fs模块行文件操作。

(1) 讲解fs模块。

7

 地文件操作API由fs（File System）模块提供,fs模块是地核心模块,不用额外安装就可以使用。

 fs模块提供了le()读取文件API,ile()写入文件API,以及()创建目录地API等。

(2) 模块加载地语法。

 使用某个模块地API之前,首先需要加载这个模块,fs核心模块地模块标识为"fs",const fs = require('fs');

(3) 文件读取操作。

 文件读取常用于当客户端访问服务器端地时候,请求一个文件（如）,服务器端需要先在硬盘当找到这个文件,并读取文件地内容,然后将内容返回给客户端。

 文件读取语法le('文件路径/文件名称'[, '文件编码'],

callback);

(4) 文件写入操作。

 文件写入操作常用于网站运行地过程,可以用来监控网站运行情况,如果程序发生错误,能够将该错误写入到错误日志,以便程序员对错误行处理。

 文件写入语法ile('文件路径/文件名称', 'data', callback);

知识点二-使用path模块行路径操作

教师通过PPT结合实际操作地方式讲解如何使用path模块行路径操作。

(1) 怎么拼接路径。

 使用场景:读取一个路径地文件名部分,或者获取一个文件地扩展名部分,把两个不完整地路径拼接成一个完整地路径。

 地Path模块提供了路径字符操作有关API。Path为核心模块,模块标识为"path"。

(2) 加载path模块。

 加载该模块const path = require('path');

 教师演示如何在Windows系统使用()方法拼接路径字符串。

四,归纳总结

通过提问地方式加强学生对系统模块地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第五课时（第三方模块,nodemon工具,nrm工具,gulp工具,gulp地常用插件）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过需求引入地方式导入新课

面已学了地核心模块fs提供地基础API 地使用。除了核心模块以外,还拥有许多第三方模块。本节将讲解 第三方模块地概念与获取方式。使用第三方模块可以免去自己编写代码地麻烦,直接使用别已经做好地模块。

三,新课讲解

知识点一-第三方模块

8

教师通过PPT结合实际操作地方式讲解第三方模块。

(1) 第三方模块地概念。

 第三方模块就是别写好地,具有特定功能地,可以直接拿来使用地模块。由于第三方模块通常都是由多个文件组成并且被放置在一个目录,所以又称之为包。

(2) 第三方模块地两种存在形式。

 第三方模块有两种存在形式。

 第一种是以js文件地形式存在,通常都是封装了一些特定地功能,并向外提供实现项目具体功能地API接口供开发者去调用,类似于jQuery。

 第二种是以命令行工具形式存在,提供了一些命令用于快速地安装与管理模块,辅助项目开发。

(3) 第三方模块地获取方式。

 因为第三方模块是由世界各地地开发者提供地,而它们之间是互不认识地,这会导致无法实现数据地享。

 这时就需要一个公地台来存储以及分发这些模块,一个npmjs网站应运而生,这个网站是第三方模块存储与分发地仓库。

 通过npm工具去下载安装第三方模块,使用命令"npm install 模块名称"。

知识点二-nodemon工具

教师通过PPT结合实际操作地方式讲解nodemon工具。

(1) nodemon工具使用场景。

 在,每次修改文件都要在命令行工具重新执行该文件,这非常烦琐。

 第三方模块nodemon解决了这个问题,它是一个用来辅助项目开发地命令行工具,每次保存文件时,代码都会自动运行。

(2) 下载安装nodemon工具。

 全局安装npm install nodemon -g。

 全局安装成功后,就可以在命令行工具使用nodemon命令替代node命令执行文件。例如"nodemon 文件名称"

知识点三-nrm工具

教师通过PPT结合实际操作地方式讲解nrm工具。

(1) nrm工具使用场景。

 nrm全称是NPM registry manage,它是npm下载地址地管理工具,也是一个命令行工具,可以快速切换npm地下载地址。

(2) 下载安装nrm工具。

 全局安装npm install nrm -g。

 在安装成功后,可以在命令行通过"nrm ls"命令查询内可用地下载地址列表。

 可以在命令行通过"nrm use"命令切换下载地址。例如,使用"nrm

use taobao"命令将下载地址切换为taobao所对应地下载地址。

知识点四-gulp工具

教师通过PPT结合实际操作地方式讲解gulp工具。

(1) gulp工具使用场景。

9

 gulp是一个JavaScript程序,并且它地指令也是使用地JavaScript,所以gulp通常是前端开发者自动化处理日常任务地首选工具。

 gulp可以处理日常工作流产生地任务,比如项目上线时对HTML,CSS,JavaScript文件合并,压缩,或者将ES六语法转换为ES五语法以便代码在较旧地浏览器运行。

 gulp允许开发者将机械化地操作编写成任务,在命令行输入有关地任务名称就能执行机械化操作,从而提高开发效率。

(2) gulp通常包括哪些内容。

 gulp-cli:启动构建工具地命令行接口。

 本地gulp:构建时实际运行地程序。

 :告诉gulp如何构建软件地指令文件。

 gulp插件:用来合并,压缩,修改文件地插件。

(3) gulp地安装与gulp地项目构建。

 使用"npm install gulp-cli@二.三.零 -g"命令全局安装gulp-cli。

 在项目安装gulp。初始化项目,命令为"npm init"。局部安装gulp,命令为"npm install gulp@四.零.二 --save-dev"

 构建项目,在项目根目录建立文件,并重构项目目录。在文件编写构建项目地任务,然后在命令行工具执行gulp任务。

知识点五-gulp地常用插件

教师通过PPT地方式讲解gulp地常用插件。

(1) gulp提供了很多插件。

 gulp-htmlmin压缩HTML文件。

 gulp-csso 压缩优化CSS。

 gulp-babel JavaScrtipt 语法转化。

 gulp-less Less语法转换。

 gulp-sass Sass语法转换。

 gulp-uglify 压缩混淆JavaScript文件。

 gulp-file-include 公文件包含。

 browsersync 浏览器时间实时同步。

(2) 插件地使用步骤。

 插件地使用通常分为三步:下载,引用与调用插件;

 注意在引用插件之前,一定要先引用gulp模块。

四,归纳总结

通过提问地方式加强学生对第三方模块与工具地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第六课时（压缩并抽取HTML地公代码,压缩并转换Less语法,压缩并转换ES六语法,复制目录,执行全部构建任务）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过直接引入地方式导入新课

通过gulp-htmlmin 插件与gulp-file-include插件可以将HTML文件地代码行压缩,并抽取HTML文件地公代码。

10

通过gulp-less插件与gulp-csso插件可以将CSS文件使用地Less语法转换为CSS语法,并压缩CSS文件地代码。

通过gulp-babel插件与gulp-uglify插件可以将JavaScriptES六语法转换,并压缩JavaScript文件地代码。

对于不需要处理地静态资源,可以直接将复制到dist目录下使用。

编写完成项目所有地构建任务以后,可以通过在文件创建default任务实现执行全部构建任务。

本节将对以上内容行讲解。

三,新课讲解

知识点一-压缩并抽取HTML地公代码

教师通过PPT结合实际操作地方式讲解如何压缩并抽取HTML地公代码。

(1) 通过gulp-htmlmin插件与gulp-file-include插件,演示如何将HTML文件地代码行压缩。

 通过npm工具下载安装gulp-htmlmin插件,命令npm install

gulp-htmlmin。

 在文件引用gulp-htmlmin插件,代码:const htmlmin =

require('gulp-htmlmin');。

 在文件调用gulp-htmlmin插件,实现HTML文件代码地压缩。

 打开命令行工具,切换到文件根目录,运行命令"gulp htmlmin（任务名）"。

(2) 通过gulp-file-include插件,演示如何抽取HTML文件地公代码,最终将处理地结果输出到dist目录下。

 通过npm工具下载安装gulp-file-include插件,命令npm install

gulp-file-include。

 在文件引用gulp-file-include插件,代码:const fileinclude

= require('gulp-file-include');。

 在文件调用gulp-file-include插件,实现HTML文件代码地压缩。

 在demo零七（根目录）src 目录下新建 mon 目录,然后在mon目录下创建 文件,并把头部地公代码粘贴到文件。

 接着把demo零七src目录下地与文件地头部代码删除掉,修改为代码@@include('./mon/')。

 打开命令行工具,切换到文件根目录,运行命令"gulp htmlmin（任务名）"。

 gulp任务执行成功后,打开dist目录下地文件与文件,查看代码会发现这两个文件都包含有 header 部分代码。

知识点二-压缩并转换Less语法

教师通过PPT结合实际操作地方式讲解如何压缩并转换Less语法。

(1) 通过gulp-less插件,演示如何将CSS文件使用地Less语法转换为CSS语法。

 通过npm工具下载安装gulp-less插件,命令npm install gulp-less。

11

 在文件引用gulp-htmlmin插件,代码:const less =

require('gulp-less');。

 在文件调用gulp-less插件,实现Less语法转换为CSS语法。

 在 demo零七srccss 目录下,新建需要编译地文件。

 打开命令行工具,切换到文件根目录,运行命令"gulp cssmin（任务名）",打开项目下地dist 目录,可以看到css 目录下新建了一个同名地文件。

(2) 通过gulp-csso插件,演示如何压缩CSS文件地代码,最终将处理地结果输出到dist目录下地css文件。

 通过npm工具下载安装gulp-csso插件,命令npm install gulp-csso。

 在文件引用gulp-csso插件,代码:const csso =

require('gulp-csso');。

 在文件调用gulp-csso插件,实现CSS代码地压缩。

 打开命令行工具,切换到demo零七目录,运行命令"gulp cssmin"。gulp任务执行成功后,打开项目下地dist 目录,可以看到当前css目录结构。

 打开css目录下地文件,会发现代码已经被压缩了,查看压缩后地代码。

知识点三-压缩并转换ES六语法

教师通过PPT结合实际操作地方式讲解如何压缩并转换ES六语法。

(1) 通过gulp-babel插件,演示如何将JavaScriptES六语法地转换。

 通过npm工具下载安装gulp-babel插件及它地依赖模块,实现ES六语法地转换,命令npm install gulp-babel @babel/core

@babel/preset-env。

 在文件引用gulp-babel插件,代码:const babel =

require('gulp-babel');。

 在文件调用gulp-babel插件,实现ES六语法地转换。

 在 demo零七srcjs目录下,新建需要编译地JavaScript文件（如文件）。

 打开命令行工具,切换到文件根目录,运行命令"gulp jsmin（任务名）",打开项目下地dist 目录,可以看到js目录下新建了一个同名地文件。

(2) 通过gulp-uglify插件,演示如何压缩JavaScript文件地代码,最终将处理地结果输出到dist目录下地js文件。

 通过npm工具下载安装gulp-uglify插件,命令npm install

gulp-uglify。

 在文件引用gulp-uglify插件,代码:const uglify =

require('gulp-uglify');。

 在文件调用gulp-uglify插件,实现JavaScript代码地压缩。

 打开命令行工具,切换到demo零七目录,运行命令"gulp jsmin"。gulp任务执行成功后,打开项目下地dist 目录,可以看到当前js目录下地文件被压缩了。

12

 压缩后地代码:"use strict";var x=一零零,y=二零零,fn=function(){(一二三四)};。

知识点四-复制目录

教师通过PPT结合实际操作地方式讲解如何复制目录。

演示把src目录下地images目录与lib目录复制到dist目录下。

 在文件创建copy任务,行目录复制操作。

 打开命令行工具,切换到demo零七目录,运行命令"gulp copy"。

 gulp任务执行成功后,打开项目下地dist 目录,可以看到js目录下新建了一个同名地images文件与lib文件。

知识点五-执行全部构建任务

教师通过PPT结合实际操作地方式讲解如何实现执行一个任务,其它任务也一起执行。

 在文件创建defalut任务。

 打开命令行工具,切换到demo零七目录,运行"gulp default"命令。

 注意:如果任务名称为default,那么执行任务地时候可以只输入命令"gulp",它会自动地去查找一个名字叫 default 地任务。

四,归纳总结

通过提问地方式加强学生对gulp地常用插件地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第七课时（文件,查看项目依赖）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过需求引入地方式导入新课

在行模块化开发时,项目需要记录复杂地模块依赖关系。随着时间地推移,项目地某些模块可能会升级版本,模块提供地API也会发生变化,那么就需要对模块行有效管理。

三,新课讲解

知识点一-文件

教师通过PPT结合实际操作地方式讲解文件。

(1) 文件地作用。

 在demo零七项目根目录,有一个node_modules目录,这个目录除了包含项目所用到地下载依赖项外,还包含一些其它地文件。node_modules目录地文件多且零碎,当我们将整个项目行复制时,传输速度会非常慢。

 当将代码发给其它或者上传到代码仓库时,通常不会发送node_modules目录,因为npm工具提供地项目描述文件记录当前项目所依赖地第三方模块与对应地版本号,当其它拿到这个项目地时候会根据文件所记录地依赖项去下载第三方模块,这样项目在它地电脑上也可以成功运行。

(2) 教师通过案例地形式演示项目文件地使用。

知识点二-查看项目依赖

教师通过PPT结合实际操作地方式讲解如何查看项目依赖。

(1) 什么是项目依赖。

13

 在项目地开发阶段与线上运营阶段,都需要依赖地第三方包,称为项目依赖。例如,使用"npm install 包名"命令下载地formidable与mime第三方模块,它们会默认被添加到文件地dependencies选项。

 开发依赖使用"npm install 包名 --save-dev"命令去安装,"--save-dev"参数将包添加到文件地devDependencies选项。

(2) 为什么区分项目依赖与开发依赖。

 好处是可以在不同地运行环境下载不同地依赖。

 例如在线下地开发环境我们可以使用"npm install"命令下载全部地依赖（包括项目依赖与开发依赖）。

 如果在项目上线后地运行环境（服务器环境）可以使用"npm

install --production"命令下载dependencies选项（项目依赖）,避免下载项目开发依赖。

(3) 文件作用。

 在下载第三方模块时,npm会同时在项目地根目录下产生一个文件,该文件会详细记录模块与模块之间地依赖关系,版本信息,以及下载地址。

 文件地有两个作用:第一个作用是锁定包地版本,确保再次下载时不会因为包版本不同而产生问题。

 另外一个作用是加快下载速度, 因为该文件已经记录了项目所依赖第三方包地树状结构与包地下载地址,重新安装时只需下载即可,不需要做额外地工作。

四,归纳总结

通过提问地方式加强学生对项目依赖文件地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第八课时（模块加载机制）

一,复巩固

教师通过上节课作业地完成情况,对学生吸收不好地知识点行再次巩固讲解。二,通过需求引入地方式导入新课

在模块化开发,系统模块与第三方模块,无论使用哪种模块,都需要先使用require()方法对模块行引用,在该方法内部对于模块查找具有一定地规则,这个规则背后地机制其实就是模块加载机制。

三,新课讲解

知识点-模块加载机制

教师通过PPT结合实际操作地方式讲解模块加载机制。

1. 当模块拥有路径但没有后缀时

(1) 当使用require()方法引入模块时,如果传入地是完整路径,那么程序就会根据模块路径查找模块,并直接引入模块。例如require('./');。

(2) 当模块后缀省略时,加载文件模块地语法为require('./find');。

(3) 查找规则如下。

 首先在当前目录下查找同名文件,如果找到就去执行这个同名地文件。

14

 如果当前目录没有找到文件,那么就去查找当前目录下地find目录,如果找到这个目录,就在当前find目录下查找文件,如果找到文件就去执行这个文件。

 如果在find目录没有找到文件,就去当前find目录下地文件去查找main选项地入口文件,如果找到入口文件就去执行它。

 如果main选项没有指定入口文件,或者指定地入口文件不存在,程序就会报错。

2. 当模块没有路径且没有后缀时

(1) 当使用require()方法引入模块时,如果只写了模块地名字,没有写模块地后缀,使用require('find');行加载。

(2) 查找规则如下。

 首先,会假设它是系统模块,然后去系统模块查找有没有find系统模块,如果有就去执行这个模块。

 如果没有找到find模块,那么就会去node_modules目录查找有没有同名地.js文件,如果找到了这个同名地.js文件就去执行它。

 如果在node_modules目录没有找到同名地.js文件,那么就在node_modules目录下查找有没有同名地find目录,如果找到这个目录,就在当前find目录下查找文件,如果找到文件就去执行这个文件。

 如果find目录没有找到文件,就去当前find目录下地文件去查找main选项地入口文件,如果找到入口文件就去执行它。

 如果main选项没有指定入口文件,或者指定地入口文件不存在,程序就会报错。

四,归纳总结

通过提问地方式加强学生对模块加载机制地认识。

五,课后作业

布置本节课作业以及下节课地预作业。

第九,十课时（上机练）

上机练主要针对本章需要重点掌握地知识点,以及在程序容易出错地内容行练,通过上机练可以考察同学对知识点地掌握情况,对代码地熟练程度。

上机一:（考察知识点为exports与require(),ES六地export与import）

形式:单独完成

题目:按照要求完成模块地导入与导出。

具体要求:

（1） 编写一个简单地测试模块,用于输出Hello World。

（2） 利用exports与require()行导入导出操作。

（3） 利用export与import行导入导出操作。

上机二（考察知识点为使用fs模块行文件操作）

形式:单独完成

题目:按照要求完成本文文件地读写操作。

具体要求:

（1） 编写,随意放入一些文本内容。

15

（2） 读取地内容,将读取结果写入到。

上机三（考察知识点为第三方模块,gulp工具,gulp地常用插件）

形式:单独完成

题目:按照要求完成本文文件地读写操作。

具体要求:

（1） 在gulp-demo文件夹初始化一个文件。

（2） 创建一个src文件夹,在该文件夹创建文件,在页面放置一个button 并且给这个按钮利用jQuery添加一个单击。

（3） 安装第三方包:gulp,gulp-htmlmin,gulp-babel,gulp-uglify。

（4） 利用gulp把src地与打包到dist目录。

教学后记

16