Express新建项目与配置项目热加载

2020-10-27 17:30:03 浏览数 (1)

Express新建项目与配置项目热加载

声明：本文记载为笔者根据官方文档创建Express项目以及使用nodemon实现express项目热加载的简单笔记，非精心创作，旨在记录，笔者不对内容质量负责。

创建Express项目

  • 运行Express生成器(只需一次)
代码语言：javascript复制
npx express-generator
  • 创建Express项目
代码语言：javascript复制
express --view=pug myapp(myapp是项目名)

此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 Pug 模板引擎

运行结果：

代码语言：javascript复制
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，安装依赖
代码语言：javascript复制
cd myapp
npm install(或yarn)
  • 启动项目
代码语言：javascript复制
  npm start

出现如下结果：

代码语言：javascript复制
  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
代码语言：javascript复制
npm install -g  nodemon //全局安装
代码语言：javascript复制
npm install --save-dev nodemon //安装为开发依赖
  • 启动项目

安装成功后，启动项目不再使用 npm start (等同于 node ./bin/www package.json中 start 处)，而是

代码语言：javascript复制
nodemon ./bin/www

运行结果：

代码语言：javascript复制
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

修改代码看看：

node.js express npm

0 人点赞