专栏首页每天学点JavaScriptExpress新建项目与配置项目热加载

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 installyarn,安装依赖
cd myapp
npm install(或yarn)
  • 启动项目
  npm start

出现如下结果:

  PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-express> npm start
  
  > cloud-film-express@0.0.0 start E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-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:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-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

修改代码看看:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6学习笔记(一)

    ES6的标准发布很久了,ES7和ES8已经出来了,直到现在才开始学习,已经有点晚了,希望可以赶得上吧。

    CherishTheYouth
  • 添加相关功能

    在BSP.c文件中定义如下三个串口初始化函数,同时将这三行添加到BSP.h文件里,对函数进行声明:

    CherishTheYouth
  • sql学习笔记(三)—— 联表查询

    既然是联表查询,那肯定得多个表啊,所以,我们先创建一个教师表,表名为 teacher,并且向表中插入数据。

    CherishTheYouth
  • MySQL 从零开始:08 番外:随机生成数据库数据

    1、网页版:Generatedata1.1 预览1.2 功能介绍1.2.1 自定义数据集名称1.2.2 选择城市1.2.3 数据集1.2.4 导出类型1.2.5...

    王强
  • 中学生CTF几道web题解

    之前偶然发现中学生 CTF 这个平台,就做了一下。结果嘛,学到不少东西,大佬们太强了

    yichen
  • BeEF 内网钓鱼获取主机信息

    BeEF是目前欧美最流行的web框架攻击平台,它的全称是 the Browser exploitation framework project.最近两年国外各种...

    C4rpeDime
  • DBA核心的价值是什么(一)

    今天下午在思考几个问题,工作的本质是什么?DBA的核心价值是什么?有哪些工作是DBA不可取代的?在整理的过程中,也有了一些心得体会。

    jeanron100
  • 考点——系统故障与并行数据库系统

    对于故障发生前已提交得事务(既有begin Transaction,又有commit)做redo操作

    ellipse
  • Groovy: 创建一个单例类

    在Groovy中创建单例类很简单。 我们只需要使用@Singleton转换注释,并为我们生成一个完整的单例类。

    白石
  • 微信小游戏入门与实战 刷爆朋友圈教程视频

    七月半夏

扫码关注云+社区

领取腾讯云代金券