Express新建项目与配置项目热加载
时间:2022-07-28
本文章向大家介绍Express新建项目与配置项目热加载,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Express新建项目与配置项目热加载
声明:本文记载为笔者根据官方文档创建Express项目以及使用nodemon实现express项目热加载的简单笔记,非精心创作,旨在记录,笔者不对内容质量负责。
创建Express项目
- 运行Express生成器(只需一次)
npx express-generator
- 创建Express项目
express --view=pug myapp(myapp是项目名)
此应用将在当前目录下的 myapp 目录中创建,并且设置为使用 Pug 模板引擎
运行结果:
express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
- 安装依赖
进入myapp文件夹,使用
npm install
或yarn
,安装依赖
cd myapp
npm install(或yarn)
- 启动项目
npm start
出现如下结果:
PS E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-express> npm start
> cloud-film-express@0.0.0 start E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-express
> node ./bin/www
以上结果表示运行成功,但是并不会自动打开浏览器,需要自行启动, 启动方法:在./bin/www中,找到启动端口,默认是3000,然后再浏览器访问:localhost:3000,即可。
配置项目热加载
express项目并不像react等前端框架,能够实时更新,即热加载,需要安装相关插件,实现类似效果。
nodemon
使用nodemon实现热加载。 nodemon可以检测文件状态,并自动执行程序关闭和启动的操作,当项目文件发生改变时,nodemon会自动停止项目运行,然后重新启动,无需你自己操作,在使用上相当于是热加载了,但实际上是伪热加载。
- 安装nodemon
npm install -g nodemon //全局安装
npm install --save-dev nodemon //安装为开发依赖
- 启动项目
安装成功后,启动项目不再使用 npm start (等同于 node ./bin/www package.json中 start 处),而是
nodemon ./bin/www
运行结果:
PS E:ProjectCloudFilmVueVersion-PracticecloudFilm-vuecloud-film-express> nodemon ./bin/www
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`
由上可看到,实际上是nodemon工具帮你执行了 node ./bin/www
修改代码看看:
- SpringMVC提交数据遭遇基础类型和日期类型报400错误解决方法
- 分布式监控系统Zabbix3.2对数据库的连接数预警
- 分布式监控系统Zabbix3.2监控数据库的连接数
- 分布式监控系统Zabbix3.2给异常添加邮件报警
- 分布式监控系统Zabbix3.2跳坑指南
- 一图看懂java内存模型
- 零代码如何打造自己的实时监控预警系统
- 一步一步在Windows中使用MyCat负载均衡 上篇
- 你真的会玩SQL吗?之逻辑查询处理阶段
- javascript中如何正确将日期(Date)字符串转换为日期(Date)对象?
- 全面迎接.Net3.0时代的到来(WCF/WF/WPF/LINQ)
- SQL Server 2005 正则表达式使模式匹配和数据提取变得更容易
- [基础]datagridview绑定数据源的几种常见方式
- c#:winform鼠标拖动窗口大小时,设定窗口最小尺寸
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 冒泡法排序
- Attribute Routing With ASP.net MVC 5
- 使用ABAP代码生成二维码(QR Code)
- 动态加载 ExtJS 类库
- Visual Studio 2013 下 NuGet 无法识别自定义包路径的解决方法
- Xcode 5 中 xib 文件格式的调整
- 调用新浪微博显示用户信息
- 如何用代码动态生成ABAP类型
- 使用自签名证书内部分发 iOS7 应用
- 在 MvvmCross 下使用 iOS Storyboard
- 动态隐藏某些特殊类型的SAP CRM附件
- 设计模式之生成器模式
- Git 客户端保存用户名和密码
- SAP WebClient UI component模型元数据解析工具
- 设计模式之抽象工厂模式