前端工程化


  • 前端工程化就是通过各种工具和技术,提升前端开发效率的过程

Node.js


  • Node.js是除了浏览器之外,可以运行javascript的环境

Node端的javascript


  • 适合开发服务器端的应用层(BFF)
  • 适合开发前端方向的工具
  • 可以用来做桌面应用开发

Node.js下的全局对象是global


  • 在交互模式下, 声明的变量和函数都属于global
  • 在脚本模式下,声明的变量和函数都不属于global

Node.js下全局函数


  • javascrip语言提供的全局函数,在node.js下依然可用

  • parseint/parseFloat/isNaN/isFinite/eval

  • node.js环境提供新的全局函数

  • 立即执行定时器(setImmediate / clearImmediate)


内置模块console


  • 在脚本模式输入node进入脚本模式
  • 输入console. + 两次tab 查看所有console命令 ​​var obj = { "name" : "dxa", "age" : 16, "sex" : "男" } console.table(obj) ​

process(进程)


  • process对象是一个全局变量,提供了有关Node.js进程的信息并对其进行控制,始终可供Node.js应用程序使用,无需使用require(),也可以使用require()显示访问 ​​//输出node版本 console.log(process.version) //输出操作系统架构 console.log(process.arch) //输出操作系统平台 console.log(process.platform) ​
  • 操作进程 ​​//获取进程编号 console.log(process.pid) //杀死进程 process.kill(进程编号) ​

内置模块path


  • path模块提供了有关路径操作的函数
  • 使用之前需要通过require引入 ​​//引入path模块 const path = require("path") //获取当前文件所在的路径 console.log(process.cwd()) //获取目录路径 console.log(__dirname) //获取文件路径 console.log(__filename) //获取文件拓展名 console.log(path.extname(__filename)) //获取文件目录部分 console.log(path.dirname(__filename)) //获取路径中文件名 console.log(path.basename(__filename)) //合并路径 const a = path.join(__dirname,path.basename(__filename)) console.log(a) ​

内置模块fs


  • fs(file system)提供了文件操作的API
  • 使用之前,需要通过require引入
  • 写入文件 ​​//写入文件(再次写入会清空文件) // fs.writeFile('文件路径','写入内容','回调函数') fs.writeFile("","这是fs.writeFile添加的文件",(err) => { if(err) throw err console.log('写入成功') }) ​
  • 读取文件 ​​//读取文件 //获取需要读取文件的路径 var filename = path.join(__dirname,'1.txt') //语法:fs.readFile('文件路径',回调函数) fs.readFile(filename,(err,data) => { if(err) throw err console.log(data.toString()) }) ​
  • 删除文件 ​​//删除文件 // 语法:fs.unlink("文件路径",回调函数) fs.unlink(__dirname + '/1.txt',(err) => { if(err) throw err console.log("删除成功") }) ​
  • 创建目录 ​​//创建目录 // 语法:fs.mkdir('目录路径',回调函数) fs.mkdir('./js',(err) => { if(err) throw err console.log("创建成功") }) ​
  • 删除目录 rmdir只能删除空目录 ​​//删除目录 // 语法:fs.rmdir('目录路径',回调函数) fs.rmdir('./js',(err) => { if(err) throw err console.log('删除成功') }) ​
  • 将一个目录文件下的文件复制到另一个目录的文件下 ​​const dist = path.join(__dirname,'dist') fs.readFile('./js/index.js',(err,data) => { if(err){ throw err } else { console.log(data.toString()) //如果没有dist目录创建目录 if(!fs.existsSync(dist)){ fs.mkdirSync(dist) } //对文件进行压缩,将无用的注释或者空格去掉 var mydata = data.toString().replace(/\s+/g,'').replace(/\/{2}[\s\S]*/g,'') //将读取到的内容写入目标文件 fs.writeFile(dist + '/index.js',data.toString(),(err) => { if(err) throw err console.log("写入成功") }) } }) ​

文件流实现复制文件

//创建读取流
var readFile = fs.createReadStream('./js/index.js')
//创建写入流
var writeFile = fs.createWriteStream('./js/demo.js')
//把读取流通过管道传给写入流
readFile.pipe(writeFile)

核心模块http


  • 利用nodejs搭建http ​​//引入模块 const http = require('http') //创建服务器 //req:请求 //res:响应 const server = http.createServer((req,res) => { res.statusCode = 200 res.setHeader('Content-type','text/plain;charset=utf-8') res.end('你好 Nodejs') }) //发布web服务 const port = 3000 const host = 'localhost' //在浏览器中访问 server.listen(port,host,() => { console.log(`服务器运行在http://${host}:${port}`) }) ​

自定义模块


  • Node.js中每个单独的.js文明,就是一个模块
  • 每个模块中都有一个module变量,其代表当前模块
  • module的exports属性是对外的接口
  • 只有导出的属性和方法才能被外部调用
  • 未导出的内容是模块私有,不能被外部访问
  • 使用require引入 ​​//模块的引用 const PI = 3.14 //计算圆的周长 function perimeter(r){ return 2 * PI * r } //计算圆的面积 function area(r){ return PI * Math.pow(r,2) } //导出自定义模块模块 module.exports = { perimeter, area } //接收模块,引入模块 // 引入模块 const demo = require("./demo") const r = 10 console.log('周长:',demo.perimeter(r)) console.log('面积:',demo.area(r)) ​

模块的加载逻辑


  • 在目录中寻找package.json文件,入口文件通过其main属性指定,如果找不到,则默认引入index.js
  • 如果引入文件不加路径,则必须把文件放在node_modules文件路径下
  • 如果在本路径下找不到node_modules,则会到上一级路径继续找

第三方模块

npm第三方模块库


  • 调整为国内路径,打开控制台
  • 检测是否切换为国内路径

  • npm config get registry

  • minify模块压缩文件

  • minify ./style.css > ./style.min.css

  • 卸载模块

  • npm uninstall minify

  • 初始化仓库

  • npm init

  • --save/-S 安装的包,开发和上线都需要.对应package.json中的dependencies
  • --save-dev/-D 安装的包,只在开发环境使用.对应package.json中的devDependencies