node基础

day01

day01-ppt node.js基础

node开发描述

• 为什么选择Node？
• node是什么？

node运行环境搭建

• node运行环境安装

nodeJs快速入门

• nodejs的组成
• nodejs的全局对象，以及对应的方法

day01-ppt 模块加载及包

Node.js模块化开发

• JavaScript开发弊端
  • JavaScript在使用时存在两大问题，文件依赖和命名冲突。
• 软件中的模块化开发
  • 一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。
• Node.js中模块化开发规范
  • Node.js规定一个JavaScript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到
  • 模块内部可以使用exports对象进行成员导出， 使用require方法导入其他模块。
• 模块成员导入
• 模块成员导出的两种方式
  • exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准
• 模块导出两种方式的联系与区别

系统模块

• 什么是系统模块
  • Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
• 系统模块fs 文件操作
  • 读取文件操作
  • 写入文件操作
• 系统模块path 路径操作
  • 为何要拼接路径
  • 路径拼接语法
  • 相对路径和绝对路径

第三方模块

• 什么是第三方模块

  • 具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包
  • 第三方模块有两种存在形式：
    • 以js文件的形式存在，提供实现项目具体功能的API接口。
    • 以命令行工具形式存在，辅助项目开发

• 获取第三方模块

  • npm (node package manager) ： node的第三方模块管理工具
  • 下载：npm install 模块名称
  • 卸载：npm unintall package 模块名称
  • 全局安装与本地安装
    • 命令行工具：全局安装
    • 库文件：本地安装

• 第三方模块 nodemon

  • nodemon是一个命令行工具，用以辅助项目开发。
  • 在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐,使用nodemon可以解决这个问题
  • 使用步骤：
    • 使用npm install nodemon –g 下载它
    • 在命令行工具中用nodemon命令替代node命令执行文件

• 第三方模块 nrm

  • nrm ( npm registry manager )：npm下载地址切换工具
  • 使用步骤
    • 使用npm install nrm –g 下载它
    • 查询可用下载地址列表 nrm ls
    • 切换npm下载地址 nrm use 下载地址名称

• 第三方模块 Gulp

  • 基于node平台开发的前端构建工具
  • 将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
  • 用机器代替手工，提高开发效率。
  • gulp能做什么？
    • 项目上线，HTML、CSS、JS文件压缩合并
    • 语法转换（es6、less …）
    • 公共文件抽离
    • 修改文件浏览器自动刷新
  • gulp的使用
    • 使用npm install gulp下载gulp库文件
    • 在项目根目录下建立gulpfile.js文件
    • 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
    • 在gulpfile.js文件中编写任务.
    • 在命令行工具中执行gulp任务
  • gulp中提供的方法
    • gulp.src()：获取任务要处理的文件
    • gulp.dest()：输出文件
    • gulp.task()：建立gulp任务
    • gulp.watch()：监控文件的变化
  • gulp插件
    • gulp-htmlmin ：html文件压缩
    • gulp-csso ：压缩css
    • gulp-babel ：JavaScript语法转化
    • gulp-less: less语法转化
    • gulp-uglify ：压缩混淆JavaScript
    • gulp-file-include 公共文件包含
    • browsersync 浏览器实时同步

package.json文件

• node_modules文件夹的问题
  • 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.
  • 复杂的模块依赖关系需要被记录，确 保模块的版本和当前保持一致，否则会导致当前项目运行报错
• package.json文件的作用
  • 项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
  • 使用npm init -y命令生成
• 项目依赖
  • 在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖
  • 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中
  • 使用 npm install 包名 --save 或者 npm install 包名 -S
• 开发依赖
  • 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
  • 使用npm install 包名 --save-dev 或 npm install 包名 -D 命令将包添加到package.json文件的devDependencies字段中
• package-lock.json文件的作用
  • 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
  • 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

Node.js中模块的加载机制

• 模块查找规则-当模块拥有路径但没有后缀时
  • require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
  • 如果模块后缀省略，先找同名JS文件再找同名JS文件夹
  • 如果找到了同名文件夹，找文件夹中的index.js
  • 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
  • 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
• 模块查找规则-当模块没有路径且没有后缀时
  • Node.js会假设它是系统模块
  • Node.js会去node_modules文件夹中
  • 首先看是否有该名字的JS文件
  • 再看是否有该名字的文件夹
  • 如果是文件夹看里面是否有index.js
  • 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
  • 否则找不到报错

day01-code

• 04.module.exports.js 04.require.js
  • 描述模块导出的两种方式，以及关系
• 05.readFile.js
  • 系统fs模块读取文件
  • 对什么是错误优先回调函数解释的例子

    // 1.通过模块的名字fs对模块进行引用
    const fs = require('fs');
    // 2.通过模块内部的readFile读取文件内容
    fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
        // 如果文件读取出错err 是一个对象 包含错误信息
        // 如果文件读取正确 err是 null
        // doc 是文件读取的结果
        console.log(err);
        console.log(doc);
    });
    /**
    * 回调函数是错误优先回调函数，第一个参数为err错误信息
    */

• 06.writeFile.js
  • 系统fs模块写文件

    const fs = require('fs');
    fs.writeFile('./demo.txt', '即将要写入的内容', err => {
        if (err != null) {
            console.log(err);
            return;
        }
        console.log('文件内容写入成功');
    })

• 08.relativeOrAbsolute.js
  • 系统模块path的应用

    const fs = require('fs');
    const path = require('path');
    console.log(__dirname);
    console.log(path.join(__dirname, '01.helloworld.js'))
    fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
        console.log(err)
        console.log(doc)
    });

• gulp-demo
  • gulpfile.js
    • 有gulp构建任务的具体写法

    // 引用gulp模块
    const gulp = require('gulp');
    const htmlmin = require('gulp-htmlmin');
    const fileinclude = require('gulp-file-include');
    const less = require('gulp-less');
    const csso = require('gulp-csso');
    const babel = require('gulp-babel');
    const uglify = require('gulp-uglify');
    // 使用gulp.task建立任务
    // 1.任务的名称
    // 2.任务的回调函数
    gulp.task('first', () => {
        console.log('我们人生中的第一个gulp任务执行了');
        // 1.使用gulp.src获取要处理的文件
        gulp.src('./src/css/base.css')
            .pipe(gulp.dest('dist/css'));
    });

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

    // css任务
    // 1.less语法转换
    // 2.css代码压缩
    gulp.task('cssmin', () => {
        // 选择css目录下的所有less文件以及css文件
        gulp.src(['./src/css/*.less', './src/css/*.css'])
            // 将less语法转换为css语法
            .pipe(less())
            // 将css代码进行压缩
            .pipe(csso())
            // 将处理的结果进行输出
            .pipe(gulp.dest('dist/css'))
    });

    // 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.task('copy', () => {

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

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

    // 构建任务
    gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);