node項目的开发

h960822

已于 2024-04-21 20:34:36 修改

阅读量448

点赞数 3

文章标签： arcgis

于 2024-04-16 21:55:32 首次发布

本文链接：https://blog.csdn.net/h960822/article/details/137795463

版权

01 创建package.json文件：

npm init 创建一个package.json 项目描述的文件。

package name ： 包名

version：版本

description：项目描述

entry point：入口文件 默认index.js

tset command：测试命名

git repository：对应github创库地址

keywords:  关键字

author:  作者

license："ISC"  开源协议

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

执行 npm run test 会执行"echo\'xxxxxx'\" && exit 1"  最后输入 xxxxxx   

exit的作用是将执行的命令结束掉。

03 开发依赖生产依赖

package.json文件中：

// 这里面所有的命令都是开发依赖 

// 安装命令 npm install 包名 --save-dev 简写 npm i 包名 -D

devDependencies：{viet webpack rollup等} 


// 生产依赖 

// npm i 包名 

dependencies：{vue vuex router  md5 pinia}


// 给编写插件或者编写npm包的开发人员使用的

peerDependencies：{}

04 npm 相关执行的命令

npm config list 

作用查看npm node版本 安装的目录地址等


npm ls

查看全局可执行的文件


npm get registry

查看镜像源


npm config set registry http://taobao.xxxx

设置镜像源

05 npm install原理

执行 npm install 命令后：


第一步 会去找config 也就是 打开终端 执行的npm config list

第二步 会去找项目中的.npmrc的文件

第三步 如果项目中没有.npmrc的文件就会去用户级的.npmrc (存在于C盘中/用户） 

第四步 如果用户没有npmrc就会去全局的查找（存在C盘/AppData）

第五步 如果全局的没有机会去npm内置的.npmrc

第六步 然后再找项目中的package-lock.json文件

第七步 如果有上面的这个文件就会和webpack.json进行对比。如果不一致以webpak.json为主更新lock。

第八步 如果上面没有这个文件，就会获取包的信息 构建依赖树 进行下载

06 npm run 原理

执行npm run xxx后

第一步 首先会去当前项目的目录下找node_modules/.bin/xxx文件 然后执行


第二步 如果当前目录中没有相关的文件 就会去全局的node_modules下面去找、 也就是我们安装的有些命令使

用的 npm i ts -g, 这个是把ts安装到了全局，并非当前的node_modeules。

07 npm声明周期

package.json文件中的命令

"script":{


    "predev":"node reve.js",

    "dev":"node index.js",

    "postdev":"node post.js"


}

声明周期函数 predev  postdev 

当执行npm run dev的时候 会先执行node reve.js 再执行 node index.js 最后执行npde post.js


使用的场景 比如执行打包的命令的时候 可以先把dist目录清除 ， 在打包完成后 执行发布的命令

08 npx

第一种情况 npx节省磁盘的空间



正常项目情况下 当我们想要创建一个react项目的使用需要使用使用到脚手架

也就是create-react-app这时候我们会先安装脚手架，然后再用脚手架去创建项目，

造成的问题脚手架安装完成以后占用磁盘的空间。


当我们使用npx创建一个react项目的时候 不需要预先下载好脚手架 可以执行 npx create-react-app demo

去创建项目，并且没有给磁盘空间下载脚手架。


npx执行的原理： 首先会现在当前项目node_modules/去找脚手架如果没有就去全局的node_modules去找，如

果全局的也没有，就是npmjs官网下载，下载完创建完项目再删掉。


第二种情况 如果我们想要执行vite这个命令的话

使用npm命令，不能直接执行npm vite， 需要在package.json中进行配置 dev:vite

使用npx命令，可以直接运行 npx vite， 因为会直接查找node_modules/.bin/目录下的vite去执行

09 cjs与esm规范

package.json 文件中：

{

  type:"commonjs"

}

语法 ：

require('fs') // 导入

modulex.express = P  导出

exporess



{

   type:'module'
}

import  xxx from './xx.js'

export default = {}

export  const fn = ()=>{}


两者之间的区别：

esm中的this是undefiend； cmj值是模块 {}

cmj是同步的可以在逻辑中使用； esm是属于异步的不能在逻辑中编写

if（true）{require('./index.js')} 这是可以的， import就不可以了

如果想要import在逻辑中使用的话 就需要使用函数式的方式导入了

if（true）{
    
   import（'./index.js'）.then(res=>{cosnole.log(res)})

}

10 全局的变量

node环境中没有DOM，BOM 没有window。

global定义全局变量 任何模块都可以获取

global.name = 'index'


globalThis定义全局变量在浏览器和node都可以使用

11 filename与__dirname

如果我们在项目src/index.js文件中输入

console.log(__dirname) // D/web/node/demo/src 到输出文件的目录


console.log(__filename) // D/web/node/demo/src/index.js 到执行的文件了

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

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

index.js文件中执行命令：


setTimeout(()=>{

console.log('这里不会输出了')

},5000)


setTimeout(()=>{

 process.exit() // 将进程杀死了

},2000)


process.on('exit',()=>{

   console.log('进程被杀死了执行的')
})

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

node环境中是无法创建和操作DOM因为不存在DOM，


但是借助于jsDOM是可以的

第一步 安装 npm i jsdom

第二步 项目中使用

const fs = require('fs')

const {JSDOM} = require('jsdom')

const root =  new JSDOM(`<DOCTYPE html><html><head></head><body>

  <div id="app"></div>

</body><html/>`)

// 请求一个接口 拿到数据填充到app里面 nodo18版本才能使用

const window = root.window 

const document = window.document // 以上这两步主要用来操作DOM 

const app = document.queselector('#app')

fetch('https://api.thecatapi.com/v1/images/search?  

limit=10&page=1').then(res=>res.json()).then(data=>{ // 第一个then指定返回的格式
 
    data.forEach(item=>{

        const img = document.createElement('img')

        img.src = item.url

        img.style.width = '200px'

        img.style.height = '200px'

        app.appendChild(img)
    })

    console.log(root.serialize()) // 这里需要将root转化为字符串 这里就是整个拼接好的DOM结构

    // 创建一个index.html的页面并把内容写入进入

    fs.writeFileSync('./index.html',root.serialize())
})

15 path相关的知识点

import path = require('path')

path.win32 可以指定电脑的系统

path.basename 返回路径的最后一部分

console.log(path.basename('./src/assets/index.html')) // index.html


path.dirname // 返回的是路径


console.log(path.dirname('./src/assets/index.html')) // ./src/assets/



path.extname // 返回扩展名  如果有多个点 返回的是最后的一个

console.log(path.extname(index.css)) // .css


path.join // 拼接路径

console.log('a','b') // a/b


path.resolve // 拼接路径  只能有一个跟目录 如果有多个只返回最后一个



path.parse() // 将路径解析成一个对象

{root:"/',dir:"/home/user/dir'base: 'file.txt',ext:'.txt'name: 'file'}


path.format() // 将对象转化为一个路径

16 OS

const os = require('os')

console.log(os.platform()) // 获取操作系统 win32  darwin mac

console.log(os.release()) // 系统的版本号  10.0.22632

console.log(os.type()) // 也是获取操作系统

console.log(os.version()) // 区分 家庭版 旗舰版等


做一个案例 webpack 有一个设置 open:true 会自动打开浏览器 

底层实现的原理  判断不同的电脑的系统 分别调用不同的shell的命令 打开浏览器 


const {exec} = require('child_process')  exec 可以执行shell命令

const platform = os.platform() 

const open = （url） => {


   if(platform === 'win32'){

        exec(`start ${url}`)

    }else if(){ // 执行其他版本的命令}


}

open('https://www.baidu.com')

读取用户所在的目录 底层原理%suerprofile%  mac是$HOME

console.log(os.homedir()) 


获取CPU架构 

console.log(os.arch())


获取cpu的信息

console.log(os.cpu().length)


获取网络信息

console.log(os.networkInterfaces())

17 procee控制进程

process.platform

console.log(process.platform) // win32  获取操作系统


process.argv

console.log(process.argv) // 获取执行命令 后面携带的参数

比如： node index.js --version 上面的命令就会输出 

['F:\lNodejsllnode.exe','F:llprojectllnodelindex.js','--version'] 


process.cwd()

console.log(process.cwd())  // 和 __dirname 一样


process.memoryUsage()

console.log(process.memoryUsage()) // 获取内存的信息


process.exit()

console.log(process.exit()) // 退出进程


process.kill(process.pid)杀死进程




env获取操作系统所有的环境变量

console.log(process.env)  // 就是电脑系统中的环境变量


通过cross-env可以设置环境变量 npm i cross-env

package.json文件中进行配置

“scripts”:{"dev":"cross-env NODE_ENV=dev  node index.js",  "build":"cross-env 

NODE_ENV=pro node index.js"}

执行命令 npx cross-env NODE_ENV=production node index.js

获取环境变量  console.log(process.env.NODE_ENV)

18 子进程 child_process

const {exec,execSync,spawn,spawnSync,execFile,execFileSync,fork} = require('child_process')

exec属于异步的方法  execSync属于同步的方法


exec可以执行shell命令 和软件进行交互

exec('node -v',(err,stdout,stderr)=>{

  if(err){
    
        return err

    }

    console.log(stdout.toString())  得到的是buffer 需要转化为字符串 

})


const nodev = execSync('node -v').toString()  // 18



execSync('start chrome https://www.baidu.com')  // 打开chrom浏览器百度


execSync('QQ音乐.exe的地址') // 打开QQ音乐


----------------------------------------------------------------------------------------

spawn 没有字节上限的 因为返回的是个流 实时返回的  apawnSync用的比较少 

const {stdout} = spawn('netstat')

stdout.on('data',(msg)=>{console.log(msg.toString())})

stdout.on('close',(msg)=>{console.log('结束了')})


----------------------------------------------------------------------------------------

execFile 可执行文件 执行脚本

execFile(path.resolve(__dirname,'./bat.cmd'),null,(err,stdount)=>

{console.log(stdout.toString())})


----------------------------------------------------------------------------------------

fork 只能接收js模块  开启一个子进程 同时可以通信

const testProcess = fork('./test.js')

testProcess.send('我是父进程') // 父进程给子进程发消息 

testProcess.on('message',(msg)=>{console.log('接收子进程消息',msg)})


test.js子进程的内容

procee.on('message',(msg)=>{ // 子进程接收父进程消息

console.log('接收到主进程的消息', msg)

})

process.send('我是子进程要发送给主进程的消息')


可以把耗时的任务放到子进程里面去执行