返回顶部
首页 > 资讯 > 前端开发 > JavaScript >open打开浏览器的过程原理示例解析
  • 370
分享到

open打开浏览器的过程原理示例解析

open打开浏览器原理open浏览器 2022-12-25 12:12:36 370人浏览 独家记忆
摘要

目录前言使用openopen 的实现原理总结前言 启动项目时,在本地服务器启动后会自动帮我们打开浏览器,程序是如何做到呢?又是哪些代码在起作用呢?希望通过本章节的学习,达成如下目标:

前言

启动项目时,在本地服务器启动后会自动帮我们打开浏览器,程序是如何做到呢?又是哪些代码在起作用呢?希望通过本章节的学习,达成如下目标:

  • 学习程序自动打开浏览的原理
  • 学会使用 node.js 强大的 child_process 模块

源码地址:sindresorhus/open

npm: open - npm (npmjs.com)

使用

配置 webpack 的 devServer 选项:

module.exports = {
  //...
  devServer: {
    open: true,
  },
};

告诉 dev-server 在服务器启动后打开浏览器。将其设置为 true 以打开默认浏览器。

DevServer | WEBpack

如果你使用的是 ue-cli,则在启动命令后面添加参数 --open

# yarn serve 不会自动打开浏览器 
yarn serve 
# --open 参数后会自动打开浏览器 
yarn serve --open

open

无论是webpack还是Vue-cli,他们能够实现在浏览器中打开网页的功能,主要依赖 open 这个包。

看一下他的 slogan :

Open stuff like URLs, files, executables. Cross-platfORM.

打开像 URL、文件、可执行文件之类的东西。跨平台。

它有以下优点:

  • 这个仓库更新维护及时
  • 丰富的参数
  • 安全
  • 解决了大多数 node-open 产生的问题
  • 跨平台

得益于以上优点,这个包每周有两千多万的下载量:

open 的实现原理

入口文件:

定位到 open 函数:

const open = (target, options) => {
	if (typeof target !== 'string') {
		throw new TypeError('Expected a `target`');
	}
	return baseOpen({
		...options,
		target
	});
};

可以看到核心实现逻辑在 baseOpen 函数:

const path = require('path');
const childProcess = require('child_process');
const {promises: fs, constants: fsConstants} = require('fs');
const {platform, arch} = process;
const baseOpen = async options => {
	options = {
		wait: false,
		background: false,
		newInstance: false,
		allowNonzeroExitCode: false,
		...options
	};
	// ... 部分代码...
	let command;
	const cliArguments = [];
	const childProcessOptions = {};
	if (platform === 'darwin') {
		command = 'open';
		if (options.wait) {
			cliArguments.push('--wait-apps');
		}
                // ...省略一些判断,
	} else if (platform === 'win32' || (isWsl && !isDocker())) {
		const mountPoint = await getWslDrivesMountPoint();
		command = isWsl ?
			`${mountPoint}c/windows/System32/WindowsPowershell/v1.0/powershell.exe` :
			`${process.env.SYSTEMROOT}\\System32\\WindowsPowerShell\\v1.0\\powershell`;
		cliArguments.push(
			'-NoProfile',
			'-NonInteractive',
			'–ExecutionPolicy',
			'Bypass',
			'-EncodedCommand'
		);
		if (app) {
			// Double quote with double quotes to ensure the inner quotes are passed through.
			// Inner quotes are delimited for PowerShell interpretation with backticks.
			encodedArguments.push(`"\`"${app}\`""`, '-ArgumentList');
			if (options.target) {
				appArguments.unshift(options.target);
			}
		} else if (options.target) {
			encodedArguments.push(`"${options.target}"`);
		}
		if (appArguments.length > 0) {
			appArguments = appArguments.map(arg => `"\`"${arg}\`""`);
			encodedArguments.push(appArguments.join(','));
		}
		// Using Base64-encoded command, accepted by PowerShell, to allow special characters.
		options.target = Buffer.from(encodedArguments.join(' '), 'utf16le').toString('base64');
	} else {
           // ...省略 其他情况
	}
	if (options.target) {
		cliArguments.push(options.target);
	}
	if (platform === 'darwin' && appArguments.length > 0) {
		cliArguments.push('--args', ...appArguments);
	}
	const subprocess = childProcess.spawn(command, cliArguments, childProcessOptions);
	if (options.wait) {
		return new Promise((resolve, reject) => {
			subprocess.once('error', reject);
			subprocess.once('close', exitCode => {
				if (options.allowNonzeroExitCode && exitCode > 0) {
					reject(new Error(`Exited with code ${exitCode}`));
					return;
				}
				resolve(subprocess);
			});
		});
	}
	subprocess.unref();
	return subprocess;
};

首先程序,使用 Node.js 中的 process.platform 属性来获取当前操作系统平台的值。字符串 'darwin' 用于标识 MacOS。'win32' 则表示 windows操作系统了。

对不同操作系统进行不同的参数组织:

  • macos : 根据 options 中的参数一一添加到 cliArguments 变量中
  • windows: 主要是获取powershell程序的路径。
    • wsl:根据子系统挂载点路径获取
    • win:根据 process.env.SYSTEMROOT 获取操作系统的根路径

process.env.SYSTEMROOT 是一个由 Node.js 提供的全局变量,表示当前系统的根目录的路径。 在 Windows 操作系统中,根目录通常是 C:\Windows。在其他操作系统中,此变量的值可能为空或不存在。

之后使用 Node.js child_process 模块中的 childProcess.spawn 函数,以启动新的子进程并执行命令。

它将 commandcliArguments 变量作为参数传递给 childProcess.spawn,以及一个名为 childProcessOptions 的对象,该对象包含子进程的选项。

childProcess.spawn 函数返回一个表示已生成子进程的 ChildProcess 对象。如果 options.wait 属性为 true,则代码会返回一个新的 Promise,该Promise 对象根据子进程的回调函数做出reject或者resolve回应。

两个事件:

  • 'error' 事件侦听 器会监控到发生的错误,reject.
  • 'close' 事件侦听 器会在退出代码为零(或 options.allowNonzeroExitCode 属性为 true)时使用 subprocess 对象解析承诺。如果退出代码为非零且 options.allowNonzeroExitCode 属性为 false,则 reject('错误代码')

最后使用 subprocess.unref 方法保持子进程运行,目的是为了使子进程在后台运行。

总结

总的来说,open原理是:针对不同的系统,使用Node.js的子进程 child_process 模块的spawn方法,调用系统的命令打开浏览器。

通过本章节课程的学习,学习到了如何使用 nodejs 的内置模块对操作系统类型的判断以及childProcess创建子进程的方式,更多关于open打开浏览器原理的资料请关注编程网其它相关文章!

--结束END--

本文标题: open打开浏览器的过程原理示例解析

本文链接: https://lsjlt.com/news/175771.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • open打开浏览器的过程原理示例解析
    目录前言使用openopen 的实现原理总结前言 启动项目时,在本地服务器启动后会自动帮我们打开浏览器,程序是如何做到呢?又是哪些代码在起作用呢?希望通过本章节的学习,达成如下目标:...
    99+
    2022-12-25
    open打开浏览器原理 open 浏览器
  • open打开浏览器的原理是什么
    今天小编给大家分享一下open打开浏览器的原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用配置 webpack ...
    99+
    2023-07-04
  • 网页资源阻塞浏览器加载的原理示例解析
    目录正文测试前环境准备图片会造成阻塞吗?CSS 加载阻塞CSS 会阻塞后面 JS 的执行吗?JS 加载阻塞defer 和 async动态脚本会造成阻塞吗?DOMContentLoad...
    99+
    2023-03-07
    网页资源阻塞浏览器加载 网页浏览器加载
  • 浏览器渲染的示例分析
    这篇文章将为大家详细讲解有关浏览器渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。浏览器渲染1.浏览器渲染图解浏览器渲染页面主要经历了下面的步骤:处理 HTML 标记并构建 DOM 树。处理 ...
    99+
    2023-06-15
  • 浏览器User-Agent的示例分析
    浏览器User-Agent的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、基础知识篇:Http Header之User-AgentUser Agent中文名为用...
    99+
    2023-06-08
  • CSS3原生支持div铺满浏览器的示例分析
    这篇文章给大家分享的是有关CSS3原生支持div铺满浏览器的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一般我们需要设置一个div与浏览器等高并等宽充满全屏,然后设置背...
    99+
    2024-04-02
  • CSS3浏览器兼容的示例分析
    这篇文章给大家分享的是有关CSS3浏览器兼容的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的,同样的代码在不一样...
    99+
    2024-04-02
  • 浏览器中兼容性的示例分析
    小编给大家分享一下浏览器中兼容性的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!浏览器就是2大派系,一个是其他浏览器,一...
    99+
    2024-04-02
  • CSS多浏览器兼容的示例分析
    本篇文章给大家分享的是有关CSS多浏览器兼容的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。 1、DOC...
    99+
    2024-04-02
  • windows中ie浏览器打开变成别的浏览器如何解决
    这篇文章主要介绍“windows中ie浏览器打开变成别的浏览器如何解决”,在日常操作中,相信很多人在windows中ie浏览器打开变成别的浏览器如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2022-12-16
    windows ie
  • webpack打包原理的示例分析
    这篇文章将为大家详细讲解有关webpack打包原理的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。webpack打包原理是根据文件间的依赖关系对其进行静态分析,将这些模块按指定规则生成静态资源,当...
    99+
    2023-06-14
  • CSS浏览器兼容性Hack的示例分析
    这篇文章给大家分享的是有关CSS浏览器兼容性Hack的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。IE6/7实现display:inline-block有两种方法,第一...
    99+
    2024-04-02
  • CSS浏览器兼容问题的示例分析
    这篇文章主要介绍了CSS浏览器兼容问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS对阅读器的兼容性偶然让人很头疼,大约...
    99+
    2024-04-02
  • 浏览器中缓存机制的示例分析
    这篇文章主要介绍了浏览器中缓存机制的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。浏览器的缓存机制?认识浏览器缓存当浏览器请求一个网...
    99+
    2024-04-02
  • JS浏览器事件模型的示例分析
    小编给大家分享一下JS浏览器事件模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript的特点1.JavaScript主要用来向HTML页...
    99+
    2023-06-15
  • Vue+iview+webpack中ie浏览器兼容处理的示例分析
    这篇文章主要介绍Vue+iview+webpack中ie浏览器兼容处理的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!环境介绍:vue: ^2.5.2iview: ^3.1....
    99+
    2024-04-02
  • javascript开发之网页兼容各种浏览器的示例分析
    这篇文章主要为大家展示了“javascript开发之网页兼容各种浏览器的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript开发之网页兼容...
    99+
    2024-04-02
  • Win10打开360浏览器提示“360se.exe损坏”如何解决
    要解决“360se.exe损坏”错误,可以尝试以下方法:1. 重新安装360浏览器:首先,卸载当前安装的360浏览器。然后,下载最新...
    99+
    2023-10-20
    Win10
  • Ajax请求与浏览器缓存的示例分析
    这篇文章主要为大家展示了“Ajax请求与浏览器缓存的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax请求与浏览器缓存的示例分析”这篇文章吧。在现代...
    99+
    2024-04-02
  • Linux下命令行浏览器links的示例分析
    这篇文章主要介绍了Linux下命令行浏览器links的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。假如你的Linux没有X11,没有ff,最小安装,没有wget,没...
    99+
    2023-06-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作