2.Node.js快速入门

Node.js笔记

• Node.js
• Node.js安装
• 快速入门
• • 创建测试工程
  • 使用函数
  • 使用模块
  • 创建http服务
  • 服务端渲染
  • 接收参数
• 资源管理器NPM
• • 工程创建
  • 本地安装
  • 全局安装
  • 修改镜像
• Webpack快速入门
• • 安装webpack
  • 快速入门
  • css打包

Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js安装

1、下载对应你系统的Node.js版本:

https://nodejs.org/en/download/ 资料 文件夹中已经提供。

2、选安装目录进行安装

完成以后，在控制台输入：

C:\Users\jack>node -v
v10.17.0
           

快速入门

创建测试工程

创建一个工程demo1，使用开发工具打开，这里使用的是WebStorm2020.1版本；

创建一个node01.js文件，在里面输入：

使用函数

使用模块

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可

见。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）

是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

创建node03.1.js

exports.add = function (a, b) {
  return a + b;
}
           

创建node03.2.js

var demo = require('./node03.1');
console.log(demo.add(10, 20));
           

命令行执行

D:\autobackup\备课教案\node\code\demo1>node node03.2.js
30
           

创建http服务

http为node内置的web模块。创建node04.js文件

/*http server*/
const http = require('http')

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/plain'
  });
  res.write('hello world');
  res.end('\n');
}).listen(8000)

console.log("服务器监听8000端口")
           

执行：

node node04.js
           

浏览器访问地址：http://localhost:8000

服务端渲染

创建node05.js

/*http server*/
const http = require('http')

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  for (var i = 0; i < 5; i++) {
    res.write('<h1>hello world</h1>');
  }
  res.end('\n');
}).listen(8000)

console.log("服务器监听8000端口")
           

通过浏览器访问

接收参数

创建文件node06.js

/*http server*/
const http = require('http')
const url = require('url')

http.createServer((req, res) => {

  // 解析url地址中的查询字符串,true将解析后的参数转成对象
  var params = url.parse(req.url, true).query;

  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  for (var key in params) {
    res.write(`<h1>${key}:${params[key]}</h1>`);
  }
  res.end('\n');
}).listen(8000)

console.log("服务器监听8000端口")
           

通过url访问：http://localhost:8000/?username=jack&age=20

访问结果：

资源管理器NPM

npm全称Node Package Manager，是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven 。

通过npm 可以很方便地下载js库，管理前端工程。

现在的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本

工程创建

创建一个空的文件夹 demo2，使用WebStorm打开，在终端执行

npm init

D:\autobackup\备课教案\node\code\demo2>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (demo2)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\autobackup\备课教案\node\code\demo2\package.json:

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

D:\autobackup\备课教案\node\code\demo2>

           

index.js

是入口文件，相当于

java

中的

main

函数，可以指定，默认是

index.js

按照提示输入相关信息，如果是用默认值则直接回车即可。

name: 项目名称

version: 项目版本号

description: 项目描述

keywords: {Array}关键词，便于用户搜索到我们的项目

最后会生成 package.json 文件，这个是包的配置文件，相当于maven的pom.xml

之后也可以根据需要进行修改。

本地安装

全局安装

全局安装

npm install express -g
           

默认的全局安装路径

{sys.user}/node_modules
           

修改镜像

D:\autobackup\备课教案\node\code\demo2>npm install -g nrm
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to u
se Promises in 1.x.)
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\jack\AppData\Roaming\npm\nrm -> C:\Users\jack\AppData\Roaming\npm\node_modules\nrm\cli.js
+ [email protected]
added 494 packages from 880 contributors in 22.259s

D:\autobackup\备课教案\node\code\demo2>nrm ls

  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/


D:\autobackup\备课教案\node\code\demo2>nrm use taobao


   Registry has been set to: https://registry.npm.taobao.org/


D:\autobackup\备课教案\node\code\demo2>

           

Webpack快速入门

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpackjs

安装webpack

npm install webpack -g 
npm install webpack-cli -g
webpack -v
           

快速入门

工程结构

创建

src

文件夹，在src下创建

bar.js

export default function bar(str) {
  document.write(str);
}
           

在

src

下创建

done.js

export default function add(a, b) {
  return a + b;
}
           

在

index.js

编写如下代码

import bar from "./src/bar";
import add from "./src/done";

bar('10+20=' + add(10, 20))
           

创建

webpack.config.js

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
           

执行

webpack

命令进行打包后生成

dist

文件夹，生成文件

bundle.js

创建

index.html

引用

bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="./dist/bundle.js"></script>
</head>
<body>

</body>
</html>
           

css打包

安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install style-loader css-loader --save-dev
           

–save-dev ： 不会在打包的时候打包。

编写

css

修改

index.js

重新打包

webpack

后访问页面