node基础与模块化开发

时间  2020-06-29
标签 node 基础 模块化 开发 繁體版
原文   原文链接

目录

1、Node.js基础

1. Node开发概述

1.1 为何要学习服务器端开发基础

  • 可以和后端程序员更加紧密的配合
  • 网站业务逻辑前置，学习前端技术须要后端技术支撑（Ajax）
  • 扩宽知识视野，可以站在更高的角度审视整个项目

1.2 服务器端开发要作的事情

  • 实现网站的业务逻辑
  • 数据的增删改查

1.3 为何选择 Node

  • 使用JavaScript语法开发后端应用
  • 一些公司要求前端 工程师掌握Node开发
  • 生态系统活跃，大开源库可使用
  • 前端开发I大多基于Node开发

1.4 Node是什么

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。javascript

运行环境css

  • 浏览器（软件）可以运行JavaScript代码，浏览器就是JavaScript代码的运行环境
  • Node（软件）可以运行JavaScript代码，Node就是JavaScript代码的运行环境

2. Node运行环境搭建

2.1 Node.js运行环境安装

官网：https://nodejs.org/en/html

  • LTS = Long Term Support 长期支持版 稳定版
  • Current 拥有最新特性 实验版

2.2 Node环境安装失败解决办法

  1. 错误代号250二、2503

失败缘由：系统账户权限不足。前端

解决办法：java

1.以管理员身份运行powershell命令行工具node

2.输入运行安装包命令 msiexec /package node 安装包位置jquery

  1. 执行命令报错

失败缘由：Node安装目录写入环境变量失败git

解决办法：将Node安装目录添加到环境变量中程序员

PATH环境变量es6

​ 存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。

3. Node.js快速入门

3.1 Node.js的组成

  • JavaScript由三部分组成，ECMAScript, DOM, BOM。
  • Node.js是由ECMAScript及Node 环境提供的一些附加API组成的，包括文件、网络、路径等一些更增强大的 API。

3.2 Node.js基础语法

全部ECMAScript语法在Node环境中均可以使用。
在Node环境下执行代码,使用Node命令执行后缀为,js的文件便可

3.3 Node.js全局对象global

在浏览器中全局对象是window,在Node中全局对象是global。

Node中全局对象下有如下方法，能够在任何地方使用，globa能够省略。

  • console.log() 在控制台中输出
  • setTimeout() 设置超时定时器
  • clearTimeout() 清除超时时定时器
  • setInterval() 设置间歇定时器
  • clearInterval() 清除间歇定时器

2、模块加载及第三方包

1. Node.js模块化开发

1.1 JavaScript开发弊端

JavaScript在使用时存在两大问题，文件依赖和命名冲突。

1.2生活中的模块化开发


1.3软件中的模块化开发

一个功能就是一个模块， 多个模块能够组成完整应用，抽离一个模块不会影响其余功能的运行。

1.4 Node.js中模块化开发规范

  • Node.js规定一个JavaScript文件就是一个模块, 模块内部定义的变量和函数默认状况下在外部没法获得
  • 模块内部可使用exports对象进行成员导出，使用require方法导入其余模块。

1.5 模块成员导出

// a.js
  // 在模块内部定义变量
 let version = 1.0;
 // 在模块内部定义方法
 const sayHi = name => `您好, ${name}`;
 // 向模块外部导出数据 
 exports.version = version;
 exports.sayHi = sayHi;

1.6模块成员的导入

// b.js
  // 在b.js模块中导入模块a
 let a = require('./b.js');
  // 输出b模块中的version变量
 console.log(a.version);
  // 调用b模块中的sayHi方法 并输出其返回值
 console.log(a.sayHi('黑马讲师'));

说明：导入模块时后缀能够省略

1.7模块成员导出的另外一种方式

module.exports.version = version;
module.exports.sayHi = sayHi;

1.8模块导出两种方式的联系与区别

exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准

2. 系统模块

2.1什么是系统模块

​ Node运行环境提供的API.由于这些API都是以模块化的方式进行开发的,因此咱们又称Node运行环境提供的API为系统模块

2.2 系统模块 fs 文件操做

f: file文件, s: system系统，文件操做系统。

读取文件内容

fs.readFile('文件路径/文件名称'[,'文件编码'], callback);

写入文件内容

fs.writeFile('文件路径/文件名称', '数据', callback);
const content = '<h3>正在使用fs.writeFile写入文件内容</h3>';
 fs.writeFile('../index.html', content, err => {
   if (err != null) { 
       console.log(err);
       return;
   }
   console.log('文件写入成功');
 });

2.3系统模块path路径操做

  • 为何要进行路径拼接
  • 不一样操做系统的路径分隔符不统一
  • /public/uploads/avatar
  • Windows上是\ /
  • Linux 上是/

2.4路径拼接语法

path.join('路径', '路径', ...)
// 导入path模块
 const path = require('path');
  // 路径拼接
 let finialPath = path.join('itcast', 'a', 'b', 'c.css');
  // 输出结果 itcast\a\b\c.css
 console.log(finialPath);

2.5相对路径VS绝对路径

  • 大多数状况下使用绝对路径,由于相对路径有时候相对的是命令行工具的当前工做目录
  • 在读取文件或者设置文件路径时都会选择绝对路径
  • 使用__dirname获取当前文件所在的绝对路径

3. 第三方模块

3.1什么是第三方模块

别人写好的、具备特定功能的、咱们能直接使用的模块即第三方模块，因为第三方模块一般都是由多个文件组成而且被放置在一个文件夹中， 因此又名包。

第三方模块有两种存在形式:

  • 以js文件的形式存在，提供实现项目具体功能的API接口。
  • 以命令行工具形式存在，辅助项目开发

3.2获取第三方模块

http://www.javashuo.com/tag/npmjs.com:第三方模块的存储和分发仓库

npm (node package manager) ： node的第三方模块管理工具

  • 下载: npm install 模块名称
  • 卸载: npm unintall package模块名称

全局安装与本地安装

  • 命令行工具:全局安装(在后加上 –g 表明全局global)
  • 库文件:本地安装

3.3 第三方模块formidable

做用：解析表单，支持get请求参数，post请求参数、 文件上传。

3.4 第三方模块nodemon

nodemon是一个命令行工具，用以辅助项目开发。

在Node.js中，每次修改文件都要在命令行工具中从新执行该文件，很是繁琐。

使用步骤

  1. 使用 npm install nodemon -g下载它
  2. 在命令行工具中用nodemon命令替代node命令执行文件
  3. 运行一次，从新编辑保存后会再运行一次

3.5 第三方模块nrm

nrm ( npm registry manager )：npm下载地址切换工具

npm默认的下载地址在国外，国内下载速度慢

使用步骤

  1. 使用npm install nrm -g下载它
  2. 查询可用下载地址列表nrm ls
  3. 切换npm下载地址nrm use下载地址名称

3.6第三方模块Gulp

基于node平台开发的前端构建工具

将机械化操做编写成任务, 想要执行机械化操做时执行一个命令行命令任务就能自动执行了

用机器代替手工，提升开发效率。

Gulp能作什么

  • 项目.上线，HTML、CSS、 JS文件压缩合并
  • 语法转换(es六、 less ..)
  • 公共文件抽离
  • 修改文件浏览器自动刷新

Gulp使用

  1. 使用npm install gulp下载gulp库文件

  2. 在项目根目录下创建gulpfile.js文件

  3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件

  4. 在gulpfile.js文件中编写任务.

  5. 在命令行工具中执行gulp任务

Gulp中提供的方法

  • gulp.src()：获取任务要处理的文件
  • gulp.dest()：输出文件
  • gulp.task()：创建gulp任务
  • gulp.watch()：监控文件的变化

例如：

const gulp = require('gulp');
  // 使用gulp.task()方法创建任务
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

注意：处理文件必须放在pipe里面

gulp-cli工具

gulp提供的命令行工具，用于执行项目里gulp的task任务

安装：npm install gulp-cli -g
在命令行使用：gulp first
说明：

  • gulp-cli由于所有项目都用获得，因此使用全局安装
  • first为本身使用task()方法建立的任务名

Gulp插件

  • gulp-htmlmin ：html文件压缩
  • gulp-csso ：压缩css
  • gulp-babel ：JavaScript语法转化
  • gulp-less: less语法转化
  • gulp-uglify ：压缩混淆JavaScript
  • gulp-file-include 公共文件包含
  • browsersync 浏览器实时同步

安装方法：npm install 插件名字

抽取html的公共代码并压缩代码

安装 gulp-htmlmin 与 gulp-file-include 插件

npm install gulp-htmlmin
npm install gulp-file-include

gulpfile.js代码：

//引入gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

//html任务
//1.压缩html文件
//2.抽取html的公共代码
gulp.task('minify', () => {
    gulp.src('./src/*.html')
    //抽取公共代码
    .pipe(fileinclude())
    //压缩代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

在src源码须要引入的html文件添加：

@@include('./common/header.html')

添加上面代码，fileinclude会指定将指定路径文件的内容注入进去

命令行执行任务：

gulp minify

转换less并压缩css代码

安装 gulp-less 与 gulp-csso 插件

npm install gulp-less
npm install gulp-csso

gulpfile.js代码：

//引入gulp模块
const gulp = require('gulp');
const less = require('gulp-less');
const csso = require('gulp-csso');

//css任务
//1.less语法转换
//2.压缩css代码
gulp.task('cssmin', () => {
    gulp.src(['./src/css/*.less','./src/css/*.css'])
    //less语法转换
    .pipe(less())
    //压缩css代码
    .pipe(csso())
    .pipe(gulp.dest('dist/css'));
});

命令行执行任务：

gulp cssmin

转换es6语法并压缩js代码

安装 gulp-babel 与 gulp-uglify 插件

gulp-babel 后面两个是他的依赖

npm install gulp-babel @babel/core @babel/preset-env
npm install gulp-uglify

gulpfile.js代码：

//引入gulp模块
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
        .pipe(babel({
            // 它能够判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())//压缩代码
        .pipe(gulp.dest('dist/js'));
});

命令行执行任务：

gulp jsmin

构建任务

  1. 上面的代码只是将基本文件整合，还须要将images等文件夹拷贝到dist
  2. 上面的任务是分别编写的，也须要分别执行，将全部整合所有运行
// 复制文件夹
gulp.task('copy', () => {

	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));

	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});

// 构建任务
//v3版本的写法
// gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

//v4版本的写法
gulp.task('default', gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy'));

说明：

gulp v4版本的gulp.task不支持第二参数为数组的传递，只能使用series或者paralle

  • gulp.series：按照顺序执行
  • gulp.paralle：能够并行计算

命令行执行任务：

gulp default

也能够不写default，默认是default

4. package.json文件

4.1 node_modules文件夹的问题

  1. 文件夹以及文件过多过碎，当咱们将项目总体拷贝给别人的时候,，传输速度会很慢很慢.

  2. 复杂的模块依赖关系须要被记录，确保模块的版本和当前保持一致，不然会致使当前项目运行报错

4.2 pakage ison文件的做用

项目描述文件，记录了当前项目信息，例如项目名称、版本、做者、github地址、当前项目依赖了哪些第三方模块等。

使用npm init -y命令生成，加 -y 是默认选项

生成以下：

{
  "name": "gulp-demo",//项目名字
  "version": "1.0.0",//版本
  "description": "",//描述
  "main": "gulpfile.js",//运行主入口文件
  "dependencies": {},//项目依赖
  "devDependencies": {},//开发依赖
  "scripts": {//命令的别名
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],//关键字描述当前项目
  "author": "",//做者
  "license": "ISC"//项目遵循的协议，默认ISC：开放源代码的协议
}

4.3 项目依赖

  • 在项目的开发阶段和线上运营阶段，都须要依赖的第三方包，称为项目依赖
  • 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中
{
    "dependencies": {
        "jquery": "^3.3.1“
    }
 }

4.4 开发依赖

  • 在项目的开发阶段须要依赖，线上运营阶段不须要依赖的第三方包，称为开发依赖
  • 使用npm install 包名 --save-dev 命令将包添加到package.json文件的devDependencies字段中
{
    "devDependencies": {
        "gulp": "^4.0.2",
    }
 }

4.5 package-lock.json文件的做用

  • 锁定包的版本,确保再次下载时不会由于包版本不一样而产生问题

  • 加快下载速度,由于该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,从新安装时只需下载便可，不须要作额外的工做

4.6安装依赖

在项目的根路径下使用以下命令：

  • 开发环境：npm install

  • 生产环境：npm install --production

生产环境不下载开发依赖(devDependencies)

4.7 使用项目命令别名

当命令过长时可使用自定义别名，格式：npm run 别名

例：npm run test

5. Node.js中模块的加载机制

5.1 模块查找规则-当模块拥有路径但没有后缀时

require('./find.js');
require('./find');

  1. require方法根据模块路径查找模块，若是是完整路径，直接引入模块。

  2. 若是模块后缀省略，先找同名JS文件再找同名JS文件夹

  3. 若是找到了同名文件夹，找文件夹中的index.js

  4. 若是文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件

  5. 若是找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到

5.2 模块查找规则-当模块没有路径且没有后缀时

require('find');

  1. Node.js会假设它是系统模块

  2. Node.js会去node_modules文件夹中

  3. 首先看是否有该名字的JS文件

  4. 再看是否有该名字的文件夹

  5. 若是是文件夹看里面是否有index.js

  6. 若是没有index.js查看该文件夹中的package.json中的main选项肯定模块入口文件

  7. 不然找不到报错

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程