node.js入门

Jeank
82 阅读4分钟
第一个hello,world程序

1.新建空项目，创建server.js文件，文件内容如下：

const { createServer } = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});


import { createServer } from 'node:http';

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

该文件有两种写法，cjs和mjs，分别代表commonjs和es6（module概念）的写法。
node.js运行时环境默认支持commonjs的写法，如果需要支持es6写法，那么需要
在空文件下新建package.json（根目录下），可通过

---初始化package.json
npm init -y

在该文件下新增

"type": "module"

运行如下命令

node server.js

效果：

image.png

image.png

node.js和浏览器的差异性

image.png

image.png 很明显的是内置api不同，所以操作可操作对象不同

V8引擎介绍

c++编写

用于编译以及执行js代码

开发和生产区别

在packjson中，一般有dependencies以及devDependencies，分别代表生产环境 依赖以及开发环境依赖，

在vue项目中也一般存在.env文件，且分别为 .env.development以及.env.production，分别代表开发环境以及生产环境

在vue项目中，还可以在全局中通过process.env.来获取.env文件中配置的值，比如process.env.APP_MODE,即可获取.env文件中APP_MODE的值

如果不是vue项目，那么通过环境变量是读取不到.env文件里面的值的

在正常项目中，我们使用以下方式来确认运行的环境

NODE_ENV=production node server.js

import { createServer } from 'node:http';

const hostname = '127.0.0.1';
const port = 3000;

const server = createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World');
});

server.listen(port, hostname, () => {
    let mode;
    if (process.env.NODE_ENV === 'development') {
        mode='development'
    }

    if (process.env.NODE_ENV === 'production') {
        mode='production'
    }

    console.log(mode+`=>Server running at http://${hostname}:${port}/`);
});

效果：

image.png 这是因为没有进行环境的安装（配置），对于这种，我们使用cross-env来解决，
cross-env是一个跨平台的可设置环境变量的npm包工具，虽然在windows环境下
可以通过set来进行环境变量的设置，但是这非常不方便。

--安装
npm install cross-env --save

--查看
npm list cross-env

---使用cross-env设置环境变量并进行启动
cross-env NODE_ENV=development node server.js

效果图：

image.png

node.js中的typescript

  1. typescript是Microsoft开发维护的开源语言，本质上是javascript的超集，所以
    它的功能也更多，使得代码更加安全和强大

  2. 使用typescript

    --安装typescript
npm install typescript

--将.ts文件编译成.js文件
npx tsc example.ts

--运行
node example.js


    type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine: User = {
  name: 'Justine',
  age: 'Secret!',
};

const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");

  3. 效果：编译器直接报错哪里有问题，和java很像

image.png

image.png 在编译的时候就报错了

image.png

4.使用 ts-node进行编译运行

--安装ts-node
npm install ts-node

--运行ts代码
npx ts-node example.ts

发现运行报错：Unknown file extension ".ts" for D:\node_study\3.与typescript的关系\example.ts

image.png 解决办法：使用 node --loader ts-node/esm example.ts进行ts转js以及运行。

  1. tsconfig.json

一般使用typescript都会有tsconfig.json文件进行typescript的配置：

{
  //编译配置
  "compilerOptions": {
    //编译后的js目标代码
    "target": "es6",
    //编译后代码使用commonjs
    //    "module": "commonjs",
    "module": "ESNext",
    //module解析策略
    "moduleResolution": "node",
    //输出目录
    "outDir": "./dist",
    //严格模式关闭
    "strict": false,
    //使用es6的module语法进行模块导入
    "esModuleInterop": true
  },
  //编译器只编译src目录下.....
  "include": ["**/*.ts"],
  //编译器不编译node_modules目录下的文件
  "exclude": ["node_modules"]
}

node.js调试

  1. 代码调试不管在后端存在，在前端也存在，在后端代码中，对于本身的ide我们可以尝试使用断点进行调试,而对于java语言可以使用输出（System.out）进行调试

  2. 在node.js中，它本身就是使用javascript进行编写，所以可以使用console.log 进行调式

  3. 而对于不同浏览器，我们可以使用debugger进行调试

  4. 本文介绍--inspect进行调试

    ---一般在启动时加上 --inspect 参数
node --inspect server.js

     import { createServer } from 'node:http';

 const hostname = '127.0.0.1';
 const port = 3000;

 const server = createServer((req, res) => {
     res.statusCode = 200;
     res.setHeader('Content-Type', 'text/plain');
     res.end('Hello World');
 });

 server.listen(port, hostname, () => {
     let code;

     if(!code){
         code='不存在'
     }
     console.log(code+`=>Server running at http://${hostname}:${port}/`);
 });

    node --inspect server.js

    效果图:

image.png

然后在edge浏览器输入edge://inspect（chrom浏览器输入chrome://inspect）
即可看到如下界面：

image.png 点击inspect，然后找到源码，进行断点调试：

image.png 浏览器继续访问对应的接口，即可进行变量debug：

image.png

avatar
文章
阅读
粉丝