• node項目的开发

    01 创建package.json文件： 

    1. npm init 创建一个package.json 项目描述的文件。
    2.  
    3. package name ： 包名
    4.  
    5. version：版本
    6.  
    7. description：项目描述
    8.  
    9. entry point：入口文件 默认index.js
    10.  
    11. tset command：测试命名
    12.  
    13. git repository：对应github创库地址
    14.  
    15. keywords:  关键字
    16.  
    17. author:  作者
    18.  
    19. license："ISC"  开源协议

    02  关于package.json文件中："test":"echo\'xxxxxx'\" && exit 1"

    1. 执行 npm run test 会执行"echo\'xxxxxx'\" && exit 1"  最后输入 xxxxxx   
    2.  
    3. exit的作用是将执行的命令结束掉。

    03 开发依赖 生产依赖

    1. package.json文件中：
    2.  
    3. // 这里面所有的命令都是开发依赖 
    4.  
    5. // 安装命令 npm install 包名 --save-dev 简写 npm i 包名 -D
    6.  
    7. devDependencies：{viet webpack rollup等} 
    8.  
    9.  
    10. // 生产依赖 
    11.  
    12. // npm i 包名 
    13.  
    14. dependencies：{vue vuex router  md5 pinia}
    15.  
    16.  
    17. // 给编写插件或者编写npm包的开发人员使用的
    18.  
    19. peerDependencies：{}
    20.

    04 npm 相关执行的命令

    1. npm config list 
    2.  
    3. 作用查看npm node版本 安装的目录地址等
    4.  
    5.  
    6. npm ls
    7.  
    8. 查看全局可执行的文件
    9.  
    10.  
    11. npm get registry
    12.  
    13. 查看镜像源
    14.  
    15.  
    16. npm config set registry http://taobao.xxxx
    17.  
    18. 设置镜像源
    19.  
    20.  
    21.

    05 npm  install原理

    1. 执行 npm install 命令后：
    2.  
    3.  
    4. 第一步 会去找config 也就是 打开终端 执行的npm config list
    5.  
    6. 第二步 会去找项目中的.npmrc的文件
    7.  
    8. 第三步 如果项目中没有.npmrc的文件就会去用户级的.npmrc (存在于C盘中/用户） 
    9.  
    10. 第四步 如果用户没有npmrc就会去全局的查找（存在C盘/AppData）
    11.  
    12. 第五步 如果全局的没有机会去npm内置的.npmrc
    13.  
    14. 第六步 然后再找项目中的package-lock.json文件
    15.  
    16. 第七步 如果有上面的这个文件就会和webpack.json进行对比。如果不一致以webpak.json为主更新lock。
    17.  
    18. 第八步 如果上面没有这个文件，就会获取包的信息 构建依赖树 进行下载

    06 npm run 原理

    1. 执行npm run xxx后
    2.  
    3. 第一步 首先会去当前项目的目录下找node_modules/.bin/xxx文件 然后执行
    4.  
    5.  
    6. 第二步 如果当前目录中没有相关的文件 就会去全局的node_modules下面去找、 也就是我们安装的有些命令使
    7.  
    8. 用的 npm i ts -g, 这个是把ts安装到了全局，并非当前的node_modeules。
    9.

    07 npm声明周期

    1. package.json文件中的命令
    2.  
    3. "script":{
    4.  
    5.  
    6.     "predev":"node reve.js",
    7.  
    8.     "dev":"node index.js",
    9.  
    10.     "postdev":"node post.js"
    11.  
    12.  
    13. }
    14.  
    15. 声明周期函数 predev  postdev 
    16.  
    17. 当执行npm run dev的时候 会先执行node reve.js 再执行 node index.js 最后执行npde post.js
    18.  
    19.  
    20. 使用的场景 比如执行打包的命令的时候 可以先把dist目录清除 ， 在打包完成后 执行发布的命令

    08 npx  

    1. 第一种情况 npx节省磁盘的空间
    2.  
    3.  
    4.  
    5. 正常项目情况下 当我们想要创建一个react项目的使用需要使用使用到脚手架
    6.  
    7. 也就是create-react-app这时候我们会先安装脚手架，然后再用脚手架去创建项目，
    8.  
    9. 造成的问题脚手架安装完成以后占用磁盘的空间。
    10.  
    11.  
    12. 当我们使用npx创建一个react项目的时候 不需要预先下载好脚手架 可以执行 npx create-react-app demo
    13.  
    14. 去创建项目，并且没有给磁盘空间下载脚手架。
    15.  
    16.  
    17. npx执行的原理： 首先会现在当前项目node_modules/去找脚手架如果没有就去全局的node_modules去找，如
    18.  
    19. 果全局的也没有，就是npmjs官网下载，下载完创建完项目再删掉。
    20.  
    21.  
    22. 第二种情况 如果我们想要执行vite这个命令的话
    23.  
    24. 使用npm命令，不能直接执行npm vite， 需要在package.json中进行配置 dev:vite
    25.  
    26. 使用npx命令，可以直接运行 npx vite， 因为会直接查找node_modules/.bin/目录下的vite去执行

    09 cjs与esm规范

    1. package.json 文件中：
    2.  
    3. {
    4.  
    5.   type:"commonjs"
    6.  
    7. }
    8.  
    9. 语法 ：
    10.  
    11. require('fs') // 导入
    12.  
    13. modulex.express = P  导出
    14.  
    15. exporess
    16.  
    17.  
    18.  
    19. {
    20.  
    21.    type:'module'
    22. }
    23.  
    24. import  xxx from './xx.js'
    25.  
    26. export default = {}
    27.  
    28. export  const fn = ()=>{}
    29.  
    30.  
    31. 两者之间的区别：
    32.  
    33. esm中的this是undefiend； cmj值是模块 {}
    34.  
    35. cmj是同步的可以在逻辑中使用； esm是属于异步的不能在逻辑中编写
    36.  
    37. if（true）{require('./index.js')} 这是可以的， import就不可以了
    38.  
    39. 如果想要import在逻辑中使用的话 就需要使用函数式的方式导入了
    40.  
    41. if（true）{
    42.     
    43.    import（'./index.js'）.then(res=>{cosnole.log(res)})
    44.  
    45. }
    46.

    10 全局的变量

    1. node环境中没有DOM，BOM 没有window。
    2.  
    3. global定义全局变量 任何模块都可以获取
    4.  
    5. global.name = 'index'
    6.  
    7.  
    8. globalThis定义全局变量在浏览器和node都可以使用

    11 filename与__dirname

    1. 如果我们在项目src/index.js文件中输入
    2.  
    3. console.log(__dirname) // D/web/node/demo/src 到输出文件的目录
    4.  
    5.  
    6. console.log(__filename) // D/web/node/demo/src/index.js 到执行的文件了

    12 prcoess.cwd() 可以获取当前文件执行的目录 相当于__dirname

    13  process.exit() 杀死进程 ：比如

    1. index.js文件中执行命令：
    2.  
    3.  
    4. setTimeout(()=>{
    5.  
    6. console.log('这里不会输出了')
    7.  
    8. },5000)
    9.  
    10.  
    11. setTimeout(()=>{
    12.  
    13.  process.exit() // 将进程杀死了
    14.  
    15. },2000)
    16.  
    17.  
    18. process.on('exit',()=>{
    19.  
    20.    console.log('进程被杀死了执行的')
    21. })

    14 CSR前端渲染   SSR服务端渲染   SEO： 爬虫在找的时候只会找html页面的不会找js， 前端渲染html的内容较少，不利于seo，服务端已经把整个html页面渲染完毕了。SEO讲究TDK，
    T值得是title，D指的是标签的description描述。K： 关键字

    1. node环境中是无法创建和操作DOM因为不存在DOM，
    2.  
    3.  
    4. 但是借助于jsDOM是可以的
    5.  
    6. 第一步 安装 npm i jsdom
    7.  
    8. 第二步 项目中使用
    9.  
    10. const fs = require('fs')
    11.  
    12. const {JSDOM} = require('jsdom')
    13.  
    14. const root =  new JSDOM(`
    16.   
    18. `)
    19.  
    20. // 请求一个接口 拿到数据填充到app里面 nodo18版本才能使用
    21.  
    22. const window = root.window 
    23.  
    24. const document = window.document // 以上这两步主要用来操作DOM 
    25.  
    26. const app = document.queselector('#app')
    27.  
    28. fetch('https://api.thecatapi.com/v1/images/search?  
    30. limit=10&page=1').then(res=>res.json()).then(data=>{ // 第一个then指定返回的格式
    31.  
    32.     data.forEach(item=>{
    33.  
    34.         const img = document.createElement('img')
    35.  
    36.         img.src = item.url
    37.  
    38.         img.style.width = '200px'
    39.  
    40.         img.style.height = '200px'
    41.  
    42.         app.appendChild(img)
    43.     })
    44.  
    45.     console.log(root.serialize()) // 这里需要将root转化为字符串 这里就是整个拼接好的DOM结构
    46.  
    47.     // 创建一个index.html的页面并把内容写入进入
    48.  
    49.     fs.writeFileSync('./index.html',root.serialize())
    50. })
    51.

    15 path相关的知识点

    1. import path = require('path')
    2.  
    3. path.win32 可以指定电脑的系统
    4.  
    5. path.basename 返回路径的最后一部分
    6.  
    7. console.log(path.basename('./src/assets/index.html')) // index.html
    8.  
    9.  
    10. path.dirname // 返回的是路径
    11.  
    12.  
    13. console.log(path.dirname('./src/assets/index.html')) // ./src/assets/
    14.  
    15.  
    16.  
    17. path.extname // 返回扩展名  如果有多个点 返回的是最后的一个
    18.  
    19. console.log(path.extname(index.css)) // .css
    20.  
    21.  
    22. path.join // 拼接路径
    23.  
    24. console.log('a','b') // a/b
    25.  
    26.  
    27. path.resolve // 拼接路径  只能有一个跟目录 如果有多个只返回最后一个
    28.  
    29.  
    30.  
    31. path.parse() // 将路径解析成一个对象
    32.  
    33. {root:"/',dir:"/home/user/dir'base: 'file.txt',ext:'.txt'name: 'file'}
    36. path.format() // 将对象转化为一个路径
    44.

    16 OS

    1. const os = require('os')
    2.  
    3. console.log(os.platform()) // 获取操作系统 win32  darwin mac
    4.  
    5. console.log(os.release()) // 系统的版本号  10.0.22632
    6.  
    7. console.log(os.type()) // 也是获取操作系统
    8.  
    9. console.log(os.version()) // 区分 家庭版 旗舰版等
    10.  
    11.  
    12. 做一个案例 webpack 有一个设置 open:true 会自动打开浏览器 
    13.  
    14. 底层实现的原理  判断不同的电脑的系统 分别调用不同的shell的命令 打开浏览器 
    15.  
    16.  
    17. const {exec} = require('child_process')  exec 可以执行shell命令
    18.  
    19. const platform = os.platform() 
    20.  
    21. const open = （url） => {
    22.  
    23.  
    24.    if(platform === 'win32'){
    25.  
    26.         exec(`start ${url}`)
    27.  
    28.     }else if(){ // 执行其他版本的命令}
    29.  
    30.  
    31. }
    32.  
    33. open('https://www.baidu.com')
    34.  
    35. 读取用户所在的目录 底层原理%suerprofile%  mac是$HOME
    36.  
    37. console.log(os.homedir()) 
    38.  
    39.  
    40. 获取CPU架构 
    41.  
    42. console.log(os.arch())
    43.  
    44.  
    45. 获取cpu的信息
    46.  
    47. console.log(os.cpu().length)
    48.  
    49.  
    50. 获取网络信息
    51.  
    52. console.log(os.networkInterfaces())
    53.

    17 procee控制进程

    1. process.platform
    2.  
    3. console.log(process.platform) // win32  获取操作系统
    4.  
    5.  
    6. process.argv
    7.  
    8. console.log(process.argv) // 获取执行命令 后面携带的参数
    9.  
    10. 比如： node index.js --version 上面的命令就会输出 
    11.  
    12. ['F:\lNodejsllnode.exe','F:llprojectllnodelindex.js','--version'] 
    13.  
    14.  
    15. process.cwd()
    16.  
    17. console.log(process.cwd())  // 和 __dirname 一样
    18.  
    19.  
    20. process.memoryUsage()
    21.  
    22. console.log(process.memoryUsage()) // 获取内存的信息
    23.  
    24.  
    25. process.exit()
    26.  
    27. console.log(process.exit()) // 退出进程
    28.  
    29.  
    30. process.kill(process.pid)杀死进程
    31.  
    32.  
    33.  
    34.  
    35. env获取操作系统所有的环境变量
    36.  
    37. console.log(process.env)  // 就是电脑系统中的环境变量
    38.  
    39.  
    40. 通过cross-env可以设置环境变量 npm i cross-env
    41.  
    42. package.json文件中进行配置
    43.  
    44. “scripts”:{"dev":"cross-env NODE_ENV=dev  node index.js",  "build":"cross-env 
    46. NODE_ENV=pro node index.js"}
    47.  
    48. 执行命令 npx cross-env NODE_ENV=production node index.js
    49.  
    50. 获取环境变量  console.log(process.env.NODE_ENV)
    51.  
    52.  
    53.  
    54.  
    55.  
    56.

    18 子进程 child_process

    1. const {exec,execSync,spawn,spawnSync,execFile,execFileSync,fork} = require('child_process')
    2.  
    3. exec属于异步的方法  execSync属于同步的方法
    4.  
    5.  
    6. exec可以执行shell命令 和软件进行交互
    7.  
    8. exec('node -v',(err,stdout,stderr)=>{
    9.  
    10.   if(err){
    11.     
    12.         return err
    13.  
    14.     }
    15.  
    16.     console.log(stdout.toString())  得到的是buffer 需要转化为字符串 
    17.  
    18. })
    19.  
    20.  
    21. const nodev = execSync('node -v').toString()  // 18
    22.  
    23.  
    24.  
    25. execSync('start chrome https://www.baidu.com')  // 打开chrom浏览器百度
    26.  
    27.  
    28. execSync('QQ音乐.exe的地址') // 打开QQ音乐
    29.  
    30.  
    31. ----------------------------------------------------------------------------------------
    32.  
    33. spawn 没有字节上限的 因为返回的是个流 实时返回的  apawnSync用的比较少 
    34.  
    35. const {stdout} = spawn('netstat')
    36.  
    37. stdout.on('data',(msg)=>{console.log(msg.toString())})
    38.  
    39. stdout.on('close',(msg)=>{console.log('结束了')})
    40.  
    41.  
    42. ----------------------------------------------------------------------------------------
    43.  
    44. execFile 可执行文件 执行脚本
    45.  
    46. execFile(path.resolve(__dirname,'./bat.cmd'),null,(err,stdount)=>
    47.  
    48. {console.log(stdout.toString())})
    49.  
    50.  
    51. ----------------------------------------------------------------------------------------
    52.  
    53. fork 只能接收js模块  开启一个子进程 同时可以通信
    54.  
    55. const testProcess = fork('./test.js')
    56.  
    57. testProcess.send('我是父进程') // 父进程给子进程发消息 
    58.  
    59. testProcess.on('message',(msg)=>{console.log('接收子进程消息',msg)})
    60.  
    61.  
    62. test.js子进程的内容
    63.  
    64. procee.on('message',(msg)=>{ // 子进程接收父进程消息
    65.  
    66. console.log('接收到主进程的消息', msg)
    67.  
    68. })
    69.  
    70. process.send('我是子进程要发送给主进程的消息')
    71.  
    72.  
    73. 可以把耗时的任务放到子进程里面去执行
    74.  
    75.  
    76.  
    77.  
    78.  
    79.  
    80.  
    81.  
    82.  
    83.

  • 相关阅读:
    dubbo+zookeeper配置及使用
    Windows静态库用C++代码调用C语言的旧库方法extern ”c“
    【Django】开发日报_3.2_Day：模板继承
    当下的力量（解读版）
    【LeetCode】最大连续 1 的个数
    【ROS】机械人开发二--ROS环境安装
    学习不同概率分布（二项分布、泊松分布等）概念及基础语法
    【解决方法】树莓派4B安装wiringpi失败、gpio -v与gpio readall命令not found（arm64架构）
    深度学习 opencv python 实现中国交通标志识别 计算机竞赛_1
    pgsql误删除pg_wal文件后，服务启动失败
  • 原文地址：https://blog.csdn.net/h960822/article/details/137795463