npm脚本与Nodejs的后端渲染

最新推荐文章于 2024-01-16 09:51:15 发布

原创最新推荐文章于 2024-01-16 09:51:15 发布 · 627 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Node.js

Node.js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了npm脚本的使用，包括其在package.json中的定义、原理、执行顺序、默认脚本和钩子。同时，文章对比了前端渲染与后端渲染的区别，并探讨了Node.js在后端渲染中的应用，特别是使用Express框架创建项目的过程，以及中间件的工作机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm-script

什么是npm-脚本
- 允许在package.json文件里面，使用scripts字段定义脚本命令。
```
{
// ...
"scripts": {
  "build": "node build.js"
}
}
```
  上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。
  
  命令行下使用npm run命令，就可以执行这段脚本。
```
          $ npm run build
          // 等同于执行
          $ node build.js
```
- 这些定义在package.json里面的脚本，就称为 npm 脚本。它的优点很多。
  1. 项目的相关脚本，可以集中在一个地方。
  2. 不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。
    用户不需要知道怎么测试你的项目，只要运行npm run test即可。
  3. 可以利用 npm 提供的很多辅助功能。
  4. 查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的npm run命令。
    $ npm run
原理
- npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。
  
  比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
  
  这意味着，当前目录的 node_modules/.bin 子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写 mocha test 就可以了。
```
      "test": "mocha test"    
      而不用写成下面这样。  
      "test": "./node_modules/.bin/mocha test"  
```
  由于 npm 脚本的唯一要求就是可以在 Shell 执行，因此它不一定是 Node 脚本，任何可执行文件都可以写在里面。
  
  npm 脚本的退出码，也遵守 Shell 脚本规则。如果退出码不是0，npm 就认为这个脚本执行失败。
执行顺序

如果 npm 脚本里面需要执行多个任务，那么需要明确它们的执行顺序。

如果是并行执行（即同时的平行执行），可以使用&符号。

$ npm run script1.js & npm run script2.js

如果是继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。

$ npm run script1.js && npm run script2.js

这两个符号是 Bash 的功能。此外，还可以使用 node 的任务管理模块：

script-runner、npm-run-all、redrun
默认值

一般来说，npm 脚本由用户提供。但是，npm 对两个脚本提供了默认值。也就是说，这两个脚本不用定义，就可以直接使用。
```
 "start": "node server.js"
 "install": "node-gyp rebuild"
```
上面代码中，npm run start 的默认值是 node server.js，前提是项目根目录下有server.js 这个脚本；

npm run install的默认值是 node-gyp rebuild，前提是项目根目录下有 binding.gyp 文件。
钩子
- npm 脚本有pre和post两个钩子。举例来说，build脚本命令的钩子就是prebuild和postbuild。
```
  "prebuild": "echo I run before the build script",
  "build": "cross-env NODE_ENV=production webpack",
  "postbuild": "echo I run after the build script"
```
- 用户执行 npm run build 的时候，会自动按照下面的顺序执行。
  
  npm run prebuild && npm run build && npm run postbuild
  
  因此，可以在这两个钩子里面，完成一些准备工作和清理工作。下面是一个例子。
```
  "clean": "rimraf ./dist && mkdir dist",
  "prebuild": "npm run clean",
  "build": "cross-env NODE_ENV=production webpack"
```
- 双重的pre和post无效，比如prepretest和postposttest是无效的。
变量
- npm 脚本有一个非常强大的功能，就是可以使用 npm 的内部变量。
  - 首先，通过 npm_package_ 前缀，npm 脚本可以拿到 package.json 里面的字段。比如，下面是一个package.json。
```
          {
          "name": "foo", 
          "version": "1.2.5",
          "scripts": {
            "view": "node view.js"
          }
        }
```
    那么，变量 npm_package_name 返回 foo，变量 npm_package_version 返回 1.2.5。
```
// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5
```
    上面代码中，我们通过环境变量process.env对象，拿到package.json的字段值。如果是 Bash 脚本，可以用$npm_package_name 和 $npm_package_version取到这两个值。
  - npm_package_前缀也支持嵌套的package.json字段。
```
  "repository": {
  "type": "git",
  "url": "xxx"
  },
  scripts: {
  "view": "echo $npm_package_repository_type"
  }
```
    上面代码中，repository 字段的type属性，可以通过 npm_package_repository_type 取到。

前端渲染 vs 后端渲染

前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端
1. 后端模板
  1. ejs
  2. pug( jade )
  3. art-template

现在流行的：前端渲染

问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
分析：需要一段数据
解决：模拟假数据（ mock数据 json-server / mock.js ）

以上这种形式叫做：前后端架构分离

很久以前，没有前端岗位的，所有的网页都需要后端完成，那个时候的情况我们称之为：前后端耦合

Node.js做项目的时候，就有两种选择了
1. 前后端分离：后端提供接口，前端渲染
2. 前后端耦合：后端渲染
直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架
创建express项目的流程
1. 安装 express-generator
  $ cnpm i express-generator -g
2. 创建express 项目
  $ express -e 项目名称 -e是安装 ejs 模板
3. 分析目录
  - package.json 整个项目的依赖配置文件
  - app.js 是整个项目的入口文件
  - views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
  - routes 是整个项目的路由配置文件
  - public 静态资源文件（img css js )
  - node_modules 整个项目的依赖包
  - bin / www 整个项目的服务器配置文件
4. 启动项目 package.json 中 npm 脚本
  $ npm run start
5. 研究项目代码
  - 入口文件