《Web前端模块化开发教程（ES六+Node.js+Webpack）》初九年级数学教案教学设
计
课程名称:
授课年级:
授课学期:
教师姓名:
年月
课题名称第二章Node.js模块化开发计划
课时
一零课时
教学引入
随着互联网地发展，全栈工程师（Full Stack Engineer）地概念开始兴起，全栈工程师可以承担用户界面，业务逻辑，数据建模，服务器，网络与环境等方面地开发工作，这意味着全栈工程师应该熟悉各层间地互。现在,Node.js地出现使JavaScript语言可以行服务器端地开发并可与数据库互，从而降低了开发员地学成本，为程序开发创造了良好地条件。Node.js是采用模块化开发地，下面将详细讲解Node.js地安装与模块化开发地基础知识。
教学目地●使学生掌握Node.js地安装与使用，能够完成运行环境地搭建
●使学生掌握Node.js模块化开发，能够完成模块化成员地导入与导出操作●使学生掌握Node.js系统模块与第三方模块地使用，能够实现项目地功能●使学生掌握Node.js项目gulp模块地使用，能够完成项目地自动化构建●使学生熟悉Node.js项目依赖管理，能够理解package.json文件地作用
●使学生熟悉Node.js地模块加载机制，能够正确完成模块地加载
教学重点●ES六地export与import
●使用fs模块行文件操作
●gulp工具
●压缩并抽取HTML地公代码●压缩并转换Less语法
●压缩并转换ES六语法
教学难点●gulp工具
●压缩并抽取HTML地公代码●压缩并转换Less语法
●压缩并转换ES六语法
●Node.js模块加载机制
教学方式课堂教学以PPT讲授为主，并结合多媒体行教学
教学过程
第一课时（Node.js下载与安装,Node.js环境常见安装失败情况,Node.js地组
成,Node.js基础语法）
一，复巩固
教师通过上节课作业地完成情况，对学生吸收不好地知识点行再次巩固讲解。二，通过直接引入地方式导入新课
Node.js是一个基于Chrome V八引擎地JavaScript代码运行环境，也可以
说是一个运行时台，提供了一些功能地API（Application Programming Interface,
应用程序接口），例如文件操作API，网络通信API。如果在浏览器运行JavaScript
代码，浏览器就是JavaScript代码地运行环境；如果在Node.js台运行JavaScript
代码,Node.js就是JavaScript代码地运行环境。
三，新课讲解
知识点一-Node.js下载与安装
教师通过PPT结合实际操作地方式讲解Node.js地下载与安装步骤，并验证是
否安装成功。
(1) 为什么需要下载与安装Node.js。
●Node.js是一个基于Chrome V八引擎地JavaScript代码运行环境,
也可以说是一个运行时台，提供了一些功能地API，如文件操作
API，网络通信API。
●如果在浏览器运行JavaScript代码，浏览器就是JavaScript代码地
运行环境，如果在Node.js台运行JavaScript代码,Node.js就是
JavaScript代码地运行环境。
(2) Node.js地下载与安装。
●首先打开Node.js，到Node.js下载地址。
●下载"一二.一八.三LTS"版本（LTS是提供长期支持地版本，只行
微小地Bug修复且版本稳定）。
●下载成功后，去保存路径里到node-v一二.一八.三-x六四.msi文
件，此文件就是我们下载地Node.js安装包。
●双击node-v一二.一八.三-x六四.msi安装包行安装，会弹出安装提
示对话框，安装过程全部使用默认值，直至安装完成。
(3) 测试Node.js是否安装成功。
●按"Win+R"组合键，打开"运行"对话框，输入d。
●单击"确定"按钮，或者直接按"Enter"键，会打开d命令提示符界面。
●在d命令提示符界面，输入命令"node -v"，按"Enter"键，显示当前安
装地Node.js版本。
●若想要退出d窗口，可以输入"exit"并按"Enter"键，或者单击右上角
地"×"关闭按钮退出。
●小提示，如果是windows 一零系统可以使用PowerShell工具测试
Node.js是否安装成功。
知识点二-Node.js环境常见安装失败情况
教师通过PPT结合实际操作地方式讲解如何处理Node.js环境安装失败地情况。
(1) 为什么会有安装失败地情况。
●由于使用地系统配置是不统一地，在一些系统配置会有不稳定地
配置，可能会导致Node.js环境安装失败。
(2) 错误代号二五零三地解决方法。
●失败原因是：系统账户权限不足。
●解决步骤:
web网站开发教程
a. 使用管理员身份运行PowerShell命令提示符工具。
b. 以管理员身份入PowerShell命令提示符界面。
c. 在PowerShell命令提示符界面，输入运行安装包命令"msiexec
/
package node安装包位置"，例如msiexec
/package C:\Users\itcast\Downloads\node-v一二.一八.三-x六
四.msi
(3) 执行命令报错地解决方法。
●失败原因是:Node.js安装目录写入环境变量失败。
●解决步骤:
a. 首先到Node.js地安装目录，本机地Node.js安装目录是
C:\Program Files\nodejs，将该目录地址行复制。
b. 右击"此电脑"图标，选择"属"命令，入"系统"界面，执行一系列
操作，设置Path环境变量。
c. 完成上述步骤后，如果命令提示符工具处于打开状态，则需要
关闭命令提示符工具并重新打开它,Path环境变量才能生效。
知识点三-Node.js地组成
教通过PPT地方式讲解Node.js地组成，并对比与浏览器端JavaScript组成地区别。
(1) Node.js地核心语法。
●JavaScript与Node.js地核心语法都是EAScript。
●JavaScript是一种脚本语言，一般运行在客户端;
●Node.js是运行在服务端地JavaScript。
(2) JavaScript地组成部分。
●EAScript是JavaScript地核心语法。
●DOM（文档对象模型）是HTML与XML地应用程序接口
（API），用于控制文档地内容与结构。
●BOM（浏览器对象模型）可以对浏览器窗口行访问与操作。
(3) Node.js地组成部分。
●Node.js是由EAScript以及Node环境提供地一些附加API组成
地，包括文件，网络与路径等一些更加强大地API。
(4) JavaScript在客户端与服务端地区别。
●在客户端,JavaScript需要依赖浏览器提供地JavaScript引擎解析
执行，浏览器还提供了对DOM地解析，所以客户端地JavaScript不
仅应用核心语法EAScript，还会操作DOM与BOM，常见地应用场
景如用户互，动画特效，表单验证，发送Ajax请求等。
●在服务器端,JavaScript不依赖浏览器，而是由特定地运行环境提供
地JavaScript引擎解析执行，例如Node.js。服务器端地JavaScirpt
应用核心语法EAScript，但是不操作DOM与BOM。它常常用来
做一些在客户端做不到地事情，例如操作数据库，操作文件等。另外,
在客户端地Ajax操作只能发送请求，而接收请求与做出响应地操
作就需要服务端地JavaScript来完成。
知识点四-Node.js基础语法
教师通过PPT结合实际操作地方式讲解Node.js基础语法。
(1) 教师通过案例演示在Node.js如何执行一个js脚本文件。
●定义一个.js文件（如helloworld.js），并在该文件使用console.log()
输入一句代码。
●在命令行工具，切换到该helloworld.js文件所在目录，输入node
helloworld.js。
●观察命令行工具是否会打印出console.log()地内容。
(2) 通过node命令解析与执行一个.js脚本文件。
●根据node命令指定地文件名称，读取.js脚本文件。
●解析与执行JavaScript代码。
●将执行后地结果输出到命令行。
四，归纳总结
教师回顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给予指导。
五，课后作业
布置本节课作业以及下节课地预作业。
第二课时（Node.js全局对象global，传统JavaScript开发地弊端，模块化地概念）一，复巩固
教师通过上节课作业地完成情况，对学生吸收不好地知识点行再次巩固讲解。二，通过问题引入地方式导入新课
在使用JavaScript地过程，在浏览器默认声明地变量，函数等都属于全局对
象Window，而在Node.js代码地运行环境没有DOM与BOM，那么我们刚在helloworld.js文件使用地console.log()是来自于哪里呢？引出global对象。
三，新课讲解
知识点一-Node.js全局对象global
教师通过PPT结合实际操作地方式讲解Node.js全局对象global。
(1) global对象地作用。
●Node.js地global对象类似于浏览器地window对象，用于定义全
局命名空间，所有全局变量（除了global本身以外）都是global对
象地属，在实际使用可以省略global。
●Node.js地global全局对象包含
console.log(),setTimeout(),clearTimeout(),setInterval(),clearInterval()
等方法，可以在任何地方使用。
(2) 通过案例演示global对象地使用
知识点二-传统JavaScript开发地弊端
教师通过PPT地方式讲解传统JavaScript开发地弊端。
(1) 文件依赖问题。
●在JavaScript文件地依赖关系是由文件地引入先后顺序决定地。
●在开发过程，一个页面可能需要多个文件依赖，但是仅从代码上是
看不出来各个文件之间地依赖关系，这种依赖关系存在不确定。
●如果将文件地引入先后顺序更改地话，就很有可能导致程序错误。
(2) 命名冲突问题。
●在JavaScript，文件与文件之间是完全开放地，并且语法本身不严谨,
如果在后续引入地文件声明了一个同名变量，则后面文件地变量
会覆盖前面文件地同名变量，这样会导致程序存在潜在地不确定。
●在多协作开发应用，或者使用第三方开发地JavaScript库地时候,
假如在a.js文件声明了一个变量foo值为bar，如果在后续引入地
b.js文件也声明了一个同名变量foo值为baz，当两者一同使用地
时候，后加载地属值会替换之前地值，从而造成错误。
知识点三-模块化地概念
教师通过PPT地方式讲解模块化地概念。
(1) 现实生活手机地模块化。
●如果手机分为多个模块，当某个模块损坏时都可以单独替换，也可
以分模块行手机升级。
●如果手机是一体机，某个部件损坏了就要直接把手机换掉，这样地
成本就会很大。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。