官网:https://nodejs.org/en/
默认安装即可,安装地址可更改,例如D:nodejs/
在命令行中执行node -v,显示版本,就说明安装成功
例如,在命令行中执行text.js文件 node text.js
// a.js
// 在模块内部定义变量
let version = 1.0;
// 在模块内部定义方法
const sayHi = name => `您好, ${
name}`;
// 向模块外部导出数据
exports.version = version;
exports.sayHi = sayHi;
// 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.sayHi = sayHi;
区别:
exports是module.exports的别名**(地址引用关系)**,导出对象最终以module.exports为准
const greeting = name => `hello ${
name}`;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;//此时两种方式指向同一个对象
// 当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准 此时exports指向无效
module.exports = {
name: 'zhangsan'
}
exports = {
age: 20
}
const a = require('./04.module.exports.js');
// console.log(a.greeting('zhangsan'));//结果包含x和greeting
console.log(a);//结果是name:'zhangsan'
Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块
例如,文件模块fs(file system)
读取文件内容语法
// 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);
});
写入文件内容
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
if (err != null) {
console.log(err);
return;
}
console.log('文件内容写入成功');
})
为什么要进行路径拼接
路径拼接语法
// 导入path模块
const path = require('path');
// 路径拼接
let finialPath = path.join('itcast', 'a', 'b', 'c.css');
// 输出结果 itcast\a\b\c.css
console.log(finialPath);
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)
});
第三方模块有两种存在形式:
以js文件的形式存在,提供实现项目具体功能的API接口。
以命令行工具形式存在,辅助项目开发
npmjs.com:第三方模块的存储和分发仓库
npm (node package manager) : node的第三方模块管理工具
注:默认下载到命令行当前目录下,会有一个名为node_modules文件夹,存放下载的模块;还有一个 package-lock.json文件
全局安装与本地安装
nodemon是一个命令行工具,用以辅助项目开发。
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。
作用:监控文件的保存操作,当文件被保存时,自动执行该文件
注: CTRL + C 键,中止操作
使用步骤
1.使用npm install nodemon –g 下载它
2.在命令行工具中用nodemon命令替代node命令执行文件
nrm ( npm registry manager ):npm下载地址切换工具
npm默认的下载地址在国外,国内下载速度慢
使用步骤
1.使用npm install nrm –g 下载它
2.查询可用下载地址列表 nrm ls
3.切换npm下载地址 nrm use 下载地址名称
基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工,提高开发效率
1.使用npm install gulp下载gulp库文件
2.在项目根目录下建立gulpfile.js文件
3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4.在gulpfile.js文件中编写任务.
5.在命令行工具中执行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'));
});
注:
使用步骤:下载–引入–使用(查api)
@@include('./common/header.html')
,此时执行任务即可)// 引用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', () => {
// 获取所有html文件
gulp.src('./src/*.html')
// 抽取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'))
});
// 构建任务,此时执行default,就可以依次执行多个任务
// 也可直接gulp,默认会去找default
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
1.文件夹以及文件过多过碎,当我们将项目整体拷贝给别人的时候,,传输速度会很慢很慢.
2.复杂的模块依赖关系需要被记录,确保模块的版本和当前保持一致,否则会导致当前项目运行报错
项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成。里面的选项都采用默认值
注:放在根目录
{
"dependencies": {
"jquery": "^3.3.1“
}
}
{
"devDependencies": {
"gulp": "^3.9.1“
}
}
注:npm install 会下载所有包,npm install --production 只下载项目依赖的包
require('./find.js');
require('./find');
1.require方法根据模块路径查找模块,如果是完整路径,直接引入模块。
2.如果模块后缀省略,先找同名JS文件再找同名JS文件夹
3.如果找到了同名文件夹,找文件夹中的index.js
4.如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件
5.如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有被找到
require('find');
1.Node.js会假设它是系统模块
2.Node.js会去node_modules文件夹中
3.首先看是否有该名字的JS文件
4.再看是否有该名字的文件夹
5.如果是文件夹看里面是否有index.js
6.如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7.否则找不到报错