欢迎光临
我的个人博客网站

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: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新建项目与配置项目热加载

配置项目热加载

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

修改代码看看:
Express新建项目与配置项目热加载

赞(0) 打赏
未经允许不得转载:张拓的天空 » Express新建项目与配置项目热加载
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏