Jacky's blog Jacky's blog
首页
  • 编码专题
  • 深入浅出 Vite
  • 深入浅出 babel
  • 快速上手API
  • 深入浅出 react
  • Node

    • code-notebook
  • 状态管理

    • redux
  • 前端工程化

    • Wepack
  • React源码

    • React源码
  • 组件库封装

    • 组件库
  • 开发工具

    • Vscode 插件
  • 项目展示
  • 案例中心 (opens new window)
  • First Project
  • 基础算法题
  • 链表题
  • 动态规划
  • 双指针
  • 递归
  • 数据结构
  • 前端学习计划 (opens new window)
  • 技术随笔
  • 转载文章
  • 包管理工具
  • 前端学习周报
  • VSCode插件
  • Promise 专题
  • 函数技巧
  • React 专题
  • 配置文件

    • TSCONFIG-配置 (opens new window)
    • NGINX-配置 (opens new window)
    • 正则规则查询手册 (opens new window)
    • Lint 配置 (opens new window)
  • 教程

    • GIT-教程
    • NPM SCRIPTS-工作流 (opens new window)
    • DOCKER-教程 (opens new window)
    • LERNA-教程 (opens new window)
    • GIT-常用操作整理 (opens new window)
  • VSCode

    • LAUNCH.JSON (opens new window)
  • 指令

    • NPM 指令 (opens new window)
    • NVM 指令 (opens new window)
    • Nginx 指令 (opens new window)
    • YARN 指令 (opens new window)
    • PNPM 指令 (opens new window)
  • 库

    • FS-EXTRA 库 (opens new window)
    • NODE 库-PATH (opens new window)
  • 永远的神

    • 魔法师卡颂-自顶向下学 React 源码 (opens new window)
    • 全栈潇晨 (opens new window)
    • 博客-程序员山月-Daily (opens new window)
    • 淘系前端:冴羽 (opens new window)
  • 系列文章

    • 《图解HTTP》 (opens new window)
    • 《ES6标准入门》 (opens new window)
    • 《现代JavaScript教程》 (opens new window)
    • 《深入浅出Webpack》 (opens new window)
    • VSCode 插件系列:小茗同学 (opens new window)
    • JEST 教程 (opens new window)
    • 前端精读周刊:各种精读系列 (opens new window)
    • 一文吃透系列 (opens new window)
    • 图解 REACT 原理 (opens new window)
  • 实用网站

    • MDN (opens new window)
    • CAN I USE (opens new window)
    • TYPESCRIPT-ESLint-RULES (opens new window)
    • ESLint-RULES (opens new window)
    • FRONT-END TREND (opens new window)
    • NPM TREND (opens new window)
    • 在线分析 Node 依赖 (opens new window)
    • FIND NPM (opens new window)
    • CODE PEN (opens new window)
    • 印记中文 (opens new window)
    • TOOL.LU (opens new window)
    • 阮一峰-网道 (opens new window)
    • DIGITAL OCEAN (opens new window)
    • DEVDOCS.IO (opens new window)
    • JOI (opens new window)
  • 算法

    • 小浩算法 (opens new window)
    • LABULADONG 的算法小抄 (opens new window)
    • 力扣 SOLUTION (opens new window)
    • HACKER RANK (opens new window)
    • 代码随想录 (opens new window)
  • 博客系列

    • 美团大佬 (opens new window)
    • 蜡笔小伟 (opens new window)
    • 优秀博客1 (opens new window)
    • 优秀博客2-umi (opens new window)
    • 优质博客 (opens new window)
  • CSS

    • CSS-EASING 库 (opens new window)
    • ROUGH.JS (opens new window)
    • CSS 网站收集
    • UNOCSS (opens new window)
  • 前端

    • PROMISE (opens new window)
    • UNDERSCORE.JS (opens new window)
    • study with BGM (opens new window)
    • nginx【B站视频】 (opens new window)
    • 机器学习
    • Js基础
  • 掘金已购课程

    • 前端自动化测试精讲 (opens new window)
    • 深入浅出 Vite (opens new window)
    • 现代 Web 布局 (opens new window)
    • 前端算法与数据结构 (opens new window)
    • 基于 Vite 的 SSG 框架开发实战 (opens new window)
    • SSR 实战:官网开发指南 (opens new window)
    • WebGL 入门与实践 (opens new window)
    • 玩转 CSS 的艺术之美 (opens new window)
    • 前端调试通关秘籍 (opens new window)
    • React 进阶实践指南 (opens new window)
    • TypeScript 全面进阶指南 (opens new window)
    • 前端缓存技术与方案解析 (opens new window)
    • npm scripts 前端工作流 (opens new window)
    • Webpack5 核心原理与应用实践 (opens new window)
  • 购物车

    • 张鑫旭-技术写作指南 (opens new window)
    • 深入剖析 Node.js 底层原理 (opens new window)
    • 前端开发者的现代 C++ 课 (opens new window)
    • 从前端到全栈 (opens new window)
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Jacky Wang

行到水穷处,坐看云起时
首页
  • 编码专题
  • 深入浅出 Vite
  • 深入浅出 babel
  • 快速上手API
  • 深入浅出 react
  • Node

    • code-notebook
  • 状态管理

    • redux
  • 前端工程化

    • Wepack
  • React源码

    • React源码
  • 组件库封装

    • 组件库
  • 开发工具

    • Vscode 插件
  • 项目展示
  • 案例中心 (opens new window)
  • First Project
  • 基础算法题
  • 链表题
  • 动态规划
  • 双指针
  • 递归
  • 数据结构
  • 前端学习计划 (opens new window)
  • 技术随笔
  • 转载文章
  • 包管理工具
  • 前端学习周报
  • VSCode插件
  • Promise 专题
  • 函数技巧
  • React 专题
  • 配置文件

    • TSCONFIG-配置 (opens new window)
    • NGINX-配置 (opens new window)
    • 正则规则查询手册 (opens new window)
    • Lint 配置 (opens new window)
  • 教程

    • GIT-教程
    • NPM SCRIPTS-工作流 (opens new window)
    • DOCKER-教程 (opens new window)
    • LERNA-教程 (opens new window)
    • GIT-常用操作整理 (opens new window)
  • VSCode

    • LAUNCH.JSON (opens new window)
  • 指令

    • NPM 指令 (opens new window)
    • NVM 指令 (opens new window)
    • Nginx 指令 (opens new window)
    • YARN 指令 (opens new window)
    • PNPM 指令 (opens new window)
  • 库

    • FS-EXTRA 库 (opens new window)
    • NODE 库-PATH (opens new window)
  • 永远的神

    • 魔法师卡颂-自顶向下学 React 源码 (opens new window)
    • 全栈潇晨 (opens new window)
    • 博客-程序员山月-Daily (opens new window)
    • 淘系前端:冴羽 (opens new window)
  • 系列文章

    • 《图解HTTP》 (opens new window)
    • 《ES6标准入门》 (opens new window)
    • 《现代JavaScript教程》 (opens new window)
    • 《深入浅出Webpack》 (opens new window)
    • VSCode 插件系列:小茗同学 (opens new window)
    • JEST 教程 (opens new window)
    • 前端精读周刊:各种精读系列 (opens new window)
    • 一文吃透系列 (opens new window)
    • 图解 REACT 原理 (opens new window)
  • 实用网站

    • MDN (opens new window)
    • CAN I USE (opens new window)
    • TYPESCRIPT-ESLint-RULES (opens new window)
    • ESLint-RULES (opens new window)
    • FRONT-END TREND (opens new window)
    • NPM TREND (opens new window)
    • 在线分析 Node 依赖 (opens new window)
    • FIND NPM (opens new window)
    • CODE PEN (opens new window)
    • 印记中文 (opens new window)
    • TOOL.LU (opens new window)
    • 阮一峰-网道 (opens new window)
    • DIGITAL OCEAN (opens new window)
    • DEVDOCS.IO (opens new window)
    • JOI (opens new window)
  • 算法

    • 小浩算法 (opens new window)
    • LABULADONG 的算法小抄 (opens new window)
    • 力扣 SOLUTION (opens new window)
    • HACKER RANK (opens new window)
    • 代码随想录 (opens new window)
  • 博客系列

    • 美团大佬 (opens new window)
    • 蜡笔小伟 (opens new window)
    • 优秀博客1 (opens new window)
    • 优秀博客2-umi (opens new window)
    • 优质博客 (opens new window)
  • CSS

    • CSS-EASING 库 (opens new window)
    • ROUGH.JS (opens new window)
    • CSS 网站收集
    • UNOCSS (opens new window)
  • 前端

    • PROMISE (opens new window)
    • UNDERSCORE.JS (opens new window)
    • study with BGM (opens new window)
    • nginx【B站视频】 (opens new window)
    • 机器学习
    • Js基础
  • 掘金已购课程

    • 前端自动化测试精讲 (opens new window)
    • 深入浅出 Vite (opens new window)
    • 现代 Web 布局 (opens new window)
    • 前端算法与数据结构 (opens new window)
    • 基于 Vite 的 SSG 框架开发实战 (opens new window)
    • SSR 实战:官网开发指南 (opens new window)
    • WebGL 入门与实践 (opens new window)
    • 玩转 CSS 的艺术之美 (opens new window)
    • 前端调试通关秘籍 (opens new window)
    • React 进阶实践指南 (opens new window)
    • TypeScript 全面进阶指南 (opens new window)
    • 前端缓存技术与方案解析 (opens new window)
    • npm scripts 前端工作流 (opens new window)
    • Webpack5 核心原理与应用实践 (opens new window)
  • 购物车

    • 张鑫旭-技术写作指南 (opens new window)
    • 深入剖析 Node.js 底层原理 (opens new window)
    • 前端开发者的现代 C++ 课 (opens new window)
    • 从前端到全栈 (opens new window)
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Node

  • VSCode插件

    • 如何打包 VSCode IDE(Mac)
    • 如何查看 VSCode 官网
    • VSCode目录结构分析
    • VSCode插件-yo脚手架创建
    • VSCode插件-debug
    • VSCode插件-TreeView
    • VSCode插件-WebView
    • VSCode插件-i18n
    • VSCode插件-Color Theme
    • VSCode插件-Node进程交互
      • 0.前言
      • 1.进程模块说明
      • 1.Node进程间的三种交互方式
        • 1. 默认pipe
        • 2. 使用公共数据流,默认传递的是父进程
        • 3.使用ipc
      • 2.其余技巧
        • 1. 如何判断是否文件是否存在:
        • 2.解决 settings 页面资源导入问题
      • 参考资料
    • VSCode 插件-Edge_devtools 源码
    • VSCode插件-使用 gulp 打包插件
    • VSCode-Tasks模式
    • VSCode插件-存储方式
    • VSCode插件-开发 code-snippets 插件
  • Webpack

  • Redux

  • React源码

  • 组件库

  • React高阶系列

  • UMI插件

  • 前端工程化

  • 单元测试vitest

  • 重点技术
  • VSCode插件
wangjiasheng
2022-03-21
目录

VSCode插件-Node进程交互

# 0.前言

# 1.进程模块说明

Node中的进程:

  1. 主进程:process,无需导入可直接通过process变量访问。

  2. 子进程:child_process,异步京城的创建方式如下:

    • child_process.exec:用于执行 shell命令

    • child_process.execFile:同上。

    • child_process.fork:增强版spawn,返回的子进程对象可以和父进程对象进行通信,通过send和on方法。

      衍生的 Node.js子进程独立于父进程,但两者之间建立的 IPC 通信通道除外。 每个进程都有自己的内存,带有自己的 V8 实例

    • child_process.spawn:上述API的底层实现。

# 1.Node进程间的三种交互方式

# 1. 默认pipe

官方说明是主进程和子进程间建立了一个管道,实际上是构建了默认开启一个事件发布订阅模式。

  • 主进程:
const path = require('path')
const { spawn } = require('child_process')

// 等价于执行 node ./child_1.js
let p = spawn('node', ['child_1.js'], {
    cwd: path.join(__dirname, 'childs'),
    stdio: ['pipe', 'pipe', 'pipe']
})

p.stdout.on('data', (data) => {
    console.log('获取到子进程的pid:', data.toString());
})

console.log("主进程pid:",process.pid);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 子进程:在子进程的终端输出pid
console.log("主进程pid:",process.pid);
1

ps. 在终端输出有两种方式:

  1. 使用 console.log
  2. 使用process.stdout.write()

# 2. 使用公共数据流,默认传递的是父进程

将pipe 改为process.stdin、process.stdout、process.stderr

  • 主进程

    const path = require('path')
    const { spawn } = require('child_process')
    
    // 等价于 node ./child_1.js
    let p = spawn('node', ['child_1.js'], {
        cwd: path.join(__dirname, 'childs'),
        stdio: [process.stdin,process.stdout, process.stderr]
    })
    
    console.log("主进程pid",process.pid);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
  • 子进程

    // 注: process 仍是 子进程的 pid(线程)
    // 但此时 process.stdout 使用的是 公共的流 (本质是父组件的流)
    process.stdout.write("子进程的pid", process.pid) // 往公共(父组件)的终端输出
    
    1
    2
    3

# 3.使用ipc

此方案感觉像是真正建立了信息交互的桥梁,原因是:在调用.send() 函数时无需再次指定传输的对象。

  • 主进程

    const path = require('path')
    const { spawn } = require('child_process')
    
    // 等价于 node ./child_1.js
    let p = spawn('node', ['child_1.js'], {
        cwd: path.join(__dirname, 'childs'),
        stdio: ["ipc", 'pipe', 'pipe']
    })
    
    p.on("message", message => {
        console.log("子进程的pid", message);
    })
    
    console.log("主进程的pid", process.pid);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
  • 子进程

    // 子进程未指定 send to Who???
    process.send(process.pid)
    
    1
    2

# 2.其余技巧

# 1. 如何判断是否文件是否存在:

let filePath: string = path.normalize(
  `${projectName}/application.config.json`
);

if (!fs.existsSync(filePath)) {
  vscode.window.showErrorMessage(
    "cmr数据同步失败,找不到application.config.json!"
  );
  return;
}
1
2
3
4
5
6
7
8
9
10

# 2.解决 settings 页面资源导入问题

function getWebViewContent2(context: any, templatePath: any) {
  const resourcePath = path.join(context.extensionPath, templatePath);
  const dirPath = path.dirname(resourcePath);
  let html = fs.readFileSync(resourcePath, "utf-8");
  // vscode不支持直接加载本地资源,需要替换成其专有路径格式,这里只是简单的将样式和JS的路径替换
  html = html.replace(
    /(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g,
    (m, $1, $2) => {
      const str =
        $1 +
        vscode.Uri.file(path.resolve(dirPath, $2.substr(1)))
          .with({ scheme: "vscode-resource" })
          .toString() +
        '"';
      return str;
    }
  );
  return html;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 参考资料

  1. https://zhuanlan.zhihu.com/p/36678971

  2. https://www.cnblogs.com/chyingp/p/node-learning-guide-child_process.html

编辑 (opens new window)
上次更新: 2023/06/17, 10:06:00
VSCode插件-Color Theme
VSCode 插件-Edge_devtools 源码

← VSCode插件-Color Theme VSCode 插件-Edge_devtools 源码→

最近更新
01
如何理解浏览器的 user agent 用户代理的含义?
11-05
02
浏览器事件循环机制
10-31
03
浏览器页面渲染机制【2023】
10-15
更多文章>
Theme by Vdoing | Copyright © 2020-2023
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式