文章目录
下载
简单的安装方式是直接官网下载，然后本地安装即可官方下载
快速入门
基础语法
所有
ECMAScript语法在node环境中都可以使用。、
- 调用js文件
node 文件名.js
全局对象 global
在浏览器中全局对象是window，在Node 中全局对象是 global
- Node中全局对象下有以下方法，可以在任何地方使用，global可以省略
- console.log() 在控制台中输出
- setTimeout() 设置超时定时器
- clearTimeout() 清除超时定时器
- setInterval() 清除间歇定时器
模块化开发
- Node.js 规定了一个
javascript文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到 - 模块内部可以使用
exports对象进行成员导出，使用require导入其他模块
导出 exports()
// a.js
// 在模块内部定义变量
let version = 1.0;
// 在模块内部定义方法
const sayHi = name => `您好, ${name}`;
// 向模块外部导出数据
exports.version = version;
exports.sayHi = sayHi;
导入 require()
// b.js
// 在b.js模块中导入模块a
let a = require('./b.js');
// 输出b模块中的version变量
console.log(a.version);
// 调用b模块中的sayHi方法 并输出其返回值
console.log(a.sayHi('黑马讲师'));
导出的另一种方式 module.exports()
module.exports.version = version;
module.exports.asyHi = sayHi;
exports 是module.exports 的别名（地址引用关系），导出对象最终以module.exports为准
exports 与module.exports 的区别
我们按照上面的代码，发现
exports与module.exports指向了同一个地址
然后我们让
module.exports重新赋值一个对象
现在两个导出的对象分别指向两个不同的地址，现在要注意导出对象最终以module.exports为准
系统模块
Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
如果需要退出node环境，可以在终端连续输入两次：Ctrl+C即可。
fs 文件操作
f:file文件 ， s：system系统， 文件操作系统。
// 通过模块的名字 fs 对模块进行引用
const fs = require('fs')
读取文件内容
fs.resaFlie('文件路径/文件名称',['文件编码'],callback)
- [ ‘文件编码’]： 可选参数
- callback：回调函数，获取文件的结果
读取文件语法示例
// 读取上一级css目录下中的base.css
fs.readFile('../css/base.css','utf-8',(err,doc) =>{
//如果文件读取发生错误 参数err的值为错误对象 否则err的值为null
if( err == null){
//在控制台中输出文件内容
console.log(doc)
}
})
写入文件内容
fs.writeFile('文件路径/文件名称','数据'，callback)
示例
const content = '<h3>正在使用fs.writeFile写入文件内容</h3>';
fs.writeFile('../index.html', content, err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件写入成功');
});
系统模块 path 路径操作
为什么要进行路径拼接
- 不同操作系统的路径分隔符不统一
- /public/uploads/avatar
- Windows 上是
\ / - Linux 上是
/
路径拼接语法 path.join()
path.join('路径','路径','路径',...)
示例
// 导入path模块
const path = require('path');
// 路径拼接
let finialPath = path.join('itcast', 'a', 'b', 'c.css');
// 输出结果 itcast\a\b\c.css
console.log(finialPath);
相对路径VS绝对路径
- 大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录
- 在读取文件或者设置文件路径时都会选择绝对路径
- 使用__dirname获取当前文件所在的绝对路径
第三方模块
什么是第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包
第三方模块有两种存在形式：
- 以js文件的形式存在，提供实现项目具体功能的API接口。
- 以命令行工具形式存在，辅助项目开发
获取第三方模块 npm
- 下载：npm install 模块名称
- 卸载：npm unintall package 模块名称
全局安装与本地安装
- 命令行工具：全局安装
-g - 库文件：本地安装
nodemon 开发工具
nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
使用步骤
- 使用
npm install nodemon –g下载它- 在命令行工具中用nodemon命令替代node命令执行文件
ctrl + c 终止操作
nrm 下载地址切换
nrm ( npm registry manager )：npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢
使用步骤
- 使用
npm install nrm –g下载它 - 查询可用下载地址列表
nrm ls - 切换npm下载地址
nrm use 下载地址名称
Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率。
能干什么
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es6、less …）
- 公共文件抽离
- 修改文件浏览器自动刷新
使用
- 使用
npm install gulp库文件 - 在项目根目录下建立
gulpfile.js文件 - 重构项目的文件结构
src 文件放置源代码文件，dist文件放置构建后文件 - 在
gulpfile.js文件文件中编写任务 - 在命令行工具(终端)中执行编写任务
Gulp中提供的方法
gulp.src()获取任务要处理的文件gulp.dest()输出文件gulp.task()建立gulp任务gulp.watch()监控文件的变化
示例
//导入gulp 模块
const gulp = require('gulp');
//使用gulp.task() 方法建立任务
gulp.task('first',()=>{
//要获取处理的文件
gulp.src('./src/css/base.css')
//将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
})
然后使用 npm install gulp-cli -g 后 使用 gulp first 执行该任务
Gulp 插件
- gulp-htmlmin ：html文件压缩
- gulp-csso ：压缩css
- gulp-babel ：JavaScript语法转化
- gulp-less: less语法转化
- gulp-uglify ：压缩混淆JavaScript
- gulp-file-include 公共文件包含
- browsersync 浏览器实时同步
代码示例
// gulpfile.js 文件
// 引用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']);
package.json文件 简述
node_modules文件夹的问题
- 文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候,，传输速度会很慢很慢.
- 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
package.json文件的作用
项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成。
项目依赖
- 在项目的开发阶段和
线上运营阶段，都需要依赖的第三方包，称为项目依赖 - 使用npm install 包名命令下载的文件会默认被添加到
package.json文件的dependencies字段中
如下
{
"dependencies": {
"jquery": "^3.3.1“
}
}
//这里导入了 juqery 的包
开发依赖
- 在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖
- 使用npm install 包名
--save-dev命令将包添加到package.json文件的devDependencies字段中
{
"devDependencies": {
"gulp": "^3.9.1“
}
}
package-lock.json文件的作用
- 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
- 加快下载速度，因为该文件中已经
记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可(在终端输入npm install)，不需要做额外的工作
Node.js中模块加载机制
模块查找规则 - 当模块拥有路径但没有后缀时
如下面的情况
require('./find.js');
require('./find');
- require方法根据模块路径查找模块，如果是完整路径，直接引入模块。
- 如果模块后缀省略，先找同名JS文件再找同名JS文件夹
- 如果找到了同名文件夹，找文件夹中的index.js
- 如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找 main选项中的入口文件
- 如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到
模块查找规则－当模块没有路径且没有后缀时
require('find')
- Node.js会假设它是系统模块
- Node.js会去node_modules文件夹中
- 首先看是否有该名字的JS文件
- 再看是否有该名字的文件夹
- 如果是文件夹看里面是否有index.js
- 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
- 否则找不到报错
npm 常见命令
npm -v：查看npm版本。npm init：初始化后会出现一个package.json配置文件。可以在后面加上-y ，快速跳过问答式界面。npm install：会根据项目中的package.json文件自动下载项目所需的全部依赖。npm install 包名 --save-dev(npm install 包名 -D)：安装的包只用于开发环境，不用于生产环境，会出现在package.json文件中的devDependencies属性中。npm install 包名 --save(npm install 包名 -S)：安装的包需要发布到生产环境的，会出现在package.json文件中的dependencies属性中。npm list：查看当前目录下已安装的node包。npm list -g：查看全局已经安装过的node包。npm --help：查看npm帮助命令。npm update 包名：更新指定包。npm uninstall 包名：卸载指定包。npm config list：查看配置信息。npm 指定命令 --help：查看指定命令的帮助。npm info 指定包名：查看远程npm上指定包的所有版本信息。npm config set registry https://registry.npm.taobao.org： 修改包下载源，此例修改为了淘宝镜像。npm root：查看当前包的安装路径。npm root -g：查看全局的包的安装路径。npm ls 包名：查看本地安装的指定包及版本信息，没有显示empty。npm ls 包名 -g：查看全局安装的指定包及版本信息，没有显示empty。
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
