Document

Node.js教程

2023-11-03
dfer
365
node.js CSDN

接上文：http://t.csdnimg.cn/lgWNR

一、node.js的概念

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript 运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

传统中的JS：ECMAScript+DOM+BOM -->浏览器中的JS，这些都是在浏览器的环境下执行。

服务器中的JS：ECMAScript + 模块系统；node.js一个新的运行环境，实现JS对服务器的操作。

相较于浏览器端的JS，nodejs去掉了DOM和BOM(服务器端哪来的页面)，仍然保留了ECMAScript的核心语法，这让前端开发人员不必改变它们书写代码的习惯，加入了大量的核心模块，通过这些核心模块，我们可以进行文件操作，服务器创建，进程管理等一系列操作。

node中的JS = ECMAScript + 模块系统

二、模块化

JS--两个运行环境，如何实现功能模块化

模块化：在当前项目中如何导入或导出功能。

1.ndde.js中的模块化（common规范）

模块导出

function fu(){
    console.log('hello,world');
};
let student={
    name:"张三",
    age:18
};

//1.导出模块功能
//方式一：一次性导出（常用）
module.exports={
    fu,
    student
};

// 方式二：分步导出
exports.fu=fu;
exports.student=student;

模块引用

//引入模块
const{fu,student}=require("./2-1node.js中的模块化");
fu();
console.log(student);

2.浏览器环境中模块化（ESM规范）

模块导出

function fu(){
    console.log('hello,world');
};
let student={
    name:"张三",
    age:18
};
//浏览器环境中导出
//方式一：导出多个功能
export{fu,student}
//方式二：只导出一个功能
export default fu;

模块引用

//引入多个功能模块
<script type="module">
        //引入模块，需将type设置成module
        import {fu,student} from "./3.1导出模块.js";
        fu();
        console.log(student);
    </script>
// 用as可以起别名
import {fu,student as a} from "./3.1导出模块.js";

//引入单个功能模块
<script type="module">
        //引入模块，需将type设置成module
        import fu from "./3.1导出模块.js";
        fu();
</script>
//可以直接改名

三、初始化项目

1.传统项目结构

2.当前项目结构

开始一个标准化的前端项目，进行如下操作

2.1 初始化项目

//进入项目文件夹
PS E:\WebGIS3D\node.js> cd .\SmartBuilding\
//确认版本号
PS E:\WebGIS3D\node.js\SmartBuilding> npm -v
10.2.1

PS E:\WebGIS3D\node.js\SmartBuilding> 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 init` 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: (smartbuilding)//项目名称
version: (1.0.0)//版本号
description: 这个项目是建智慧楼宇//描述
entry point: (index.js)//入口
test command:
git repository:   //上传仓库地址
keywords:
author: FuYoujie
license: (ISC)
About to write to E:\WebGIS3D\node.js\SmartBuilding\package.json:

{
  "name": "smartbuilding",
  "version": "1.0.0",
  "description": "这个项目是建智慧楼宇",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "FuYoujie",
  "license": "ISC"
}


Is this OK? (yes) OK
Aborted.
PS E:\WebGIS3D\node.js\SmartBuilding>


//************************
npm init -y//可以直接生成一个package.json

操作成功会生成一个package.json文件

2.2文件夹结构

在项目文件夹中创建一个src文件夹用于存放引用文件

四、NPM常见指令

npm =>node package manage node环境下的第三方依赖管理，在安装node.js的过程中自动安装。

1.使用npm镜像

由于npm是国外的，进行第三方依赖下载安装的过程较慢，可以换成国内的镜像进行操作。

#设置淘宝镜像
npm config set registry https://registry.npmmirror.com/

#确认是否设置完成
 npm config get registry

出现https://registry.npm,taobao.orghttps://registry.npmmirror.com/https://registry.npm,taobao.org这个即是设置成功

2.常见的npm命令

在安装指令后面加-g，指的是全局安装，就不用每个项目都安装了

在安装指令后面加-D，指的是安装到开发环境中，在package的devDependencies下。

npm install 依赖包名

install 可以简写为 i

--save是默认的不加也有是将依赖添加进 package.json

安装的依赖包会自动统一生成一个存放依赖包的文件夹，不用更改。

package.json会自动记录安装的依赖名称和版本号

npm i 可以安装所有package.json中的第三方依赖

3.使用【npm 安装\卸载】依赖

下载一个函数库lodash

具体使用教程可以参考lodash官网

Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com)

#安装指令
npm i --save lodash@版本号

--save 是默认值  可以不写

@是下载想要的版本号，不写默认下载最新版本

npm i lodash#常用最简指令

//卸载指令
npm uninstall 依赖包名

//更新指令，只更新小版本
npm updata 依赖包

4.引入第三方依赖

在index.js文件中引入第三方依赖

//这里是逻辑路口
//在这里引入lodash
const lodash= require("../node_modules/lodash")
 console.log(lodash);

//存放在node_modules中的第三方依赖包，可以直接引入，不必书写完整路径
//自己写的包，引入需要使用全部路径
const lodash= require("lodash")
console.log(lodash);

5.使用示例

_.drop(array, [n=1])
创建一个切片数组，去除array前面的n个元素。（n默认值为1。）
_.drop([1, 2, 3]);
// => [2, 3]
 

const lodash= require("lodash")
let arr=[1,2,3,6,9,8,7]
let _arr=lodash.drop(arr,3)
console.log(_arr)
//终端输出
PS E:\WebGIS3D\node.js\SmartBuilding> node .\src\index.js     
[ 6, 9, 8, 7 ]

五、webpack的作用

webpack是基于node.js开发的前端工具，它的核心是通过依赖关系将所有的资源模块进行打包
一起来到编辑器中来操作一下。

作用1：利用webpack实现对两种模块化规范的兼容；

作用2：实现对代码的压缩

1.安装webpack

新建一个名为webpack的文件夹，初始化项目后在集成终端中输入以下命令:

npm i webpack
npm i webpack-cli -g

2.项目打包

准备工作：在src文件夹下新建index.js

方式一：执行默认指令，会自动找到src文件夹下的index.html文件进行打包，项目打包完成后会生成一个dist文件夹，该文件夹下的main.js才是入口文件需要引入的js文件。

npx webpack

方式二：手动干预指令：（尽量使用默认规范）

可以在形目文件夹下新建一个webpack.config.js文件，在该文件中进行配置

//webpack打包的配置文件
const path=require('path')
module.exports = {
    //打包入口
    entry:"./src/peiqi.js",
    //打包出口，path必须写绝对路径 利用node.js的一个核心模块
    //__dirname表示文件当前的绝对路径
    output:{
        path:path.resolve(__dirname,'outnow'),
        filename:'suxi.js'
    }
};

3.项目引入

在项目index.html中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>

六、CSS样式文件的引用和打包

1.安装css-loader、style-loader、mini-css-extract-plugin插件

使用教程见官网【css-loader】、【mini-css-extract-plugin】

//-D 是将依赖包安装在开发环境中
//css-loader是将css文件引入js环境
//style-loader是将样式进行内部引入（style标签）
//mini-css-extract-plugin生成打包成单独的css文件，需手动添加link引用
npm i css-loader -D
npm i style-loader -D
npm i mini-css-extract-plugin -D

2.环境配置

方式一：以style标签的方式设置样式

index.js

import'./src/index.css'

webpack.config.js

module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  };

方式二：以link标签引用的方式设置样式

index.js

import'./src/index.css'

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

index.html

<link rel="stylesheet" href="./dist/main.css">

上一篇： JavaScript

下一篇：基于PHP的企业考勤