一帧数据 微服务 VMware HTTP请求 codeigniter count icons 后台系统模板 matlab根号怎么打出来 chrome发送post请求 php获取当天的0点时间戳 python中集合 java日期 java入门编程 java开发者 java怎么写接口 linuxtail命令 乱码查看器 枪神传说辅助 php取整函数 comsol软件下载 选择模拟位置信息应用 groupy 上传附件 pr动态字幕 小程序游戏源码 ftp客户端软件 文件压缩工具 类似迅雷的下载软件 贪吃蛇c语言代码 浣海之核 dos命令大全及用法 gho文件浏览工具 python保存文件 ps怎么做印章效果 origin怎么画图 图片格式转换工具 橙子助手 mysql数据备份 1004
当前位置: 首页 > 学习教程  > 

npm脚本与Nodejs的后端渲染

2020/10/16 18:00:05 文章标签: nodejs后端开发

npm-script 什么是npm-脚本 允许在package.json文件里面,使用scripts字段定义脚本命令。 { // ... "scripts": {"build": "node build.js" } }上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每…

npm-script

  1. 什么是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

  2. 原理

    • 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 就认为这个脚本执行失败。

  3. 执行顺序

    如果 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

  4. 默认值

    一般来说,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 文件。

  5. 钩子

    • 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是无效的。
  6. 变量

    • 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 后端渲染

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

现在流行的: 前端渲染

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

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

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

  1. Node.js做项目的时候 ,就有两种选择了

    1. 前后端分离 :后端提供接口,前端渲染
    2. 前后端耦合: 后端渲染
  2. 直接借助一个工具来搭建一个Node.js项目,这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

  3. 创建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. 研究项目代码

      • 入口文件

express 中间件 (Middleware)

中间件是一个函数,函数中参数有三个:

  1. request 请求
  2. response 响应
  3. next 请求和响应中间的循环流程

中间件有三种类型

  1. 应用级中间件
  2. 路由中间件
  3. 错误处理中间件

前端的请求方式有几种?

  1. get
  2. post
  3. put
  4. delete
  5. head
  6. all

以上的请求方式统称为: restful api

restful是一个规则,这个规则规定了数据接口的使用原则

举例:
http:localhost:300/shopcar/add
http:localhost:300/shopcar/delete
http://localhost:300/shopcar

想: 如果能有一个接口来表示不同的请求功能,那会怎么样呢?

解决: restful api 这个规则
http://localhost:300/shopcar

get
post
put
delete


本文链接: http://www.dtmao.cc/news_show_300274.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?