open打開瀏覽器的原理是什么

今天小編給大家分享一下open打開瀏覽器的原理是什么的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

使用

配置 webpack 的 devServer 選項：

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

告訴 dev-server 在服務器啟動后打開瀏覽器。將其設置為 true 以打開默認瀏覽器。

DevServer | webpack

如果你使用的是 ue-cli,則在啟動命令后面添加參數(shù) --open：

# yarn serve 不會自動打開瀏覽器 
yarn serve 
# --open 參數(shù)后會自動打開瀏覽器 
yarn serve --open

open

無論是webpack還是vue-cli,他們能夠實現(xiàn)在瀏覽器中打開網(wǎng)頁的功能，主要依賴 open 這個包。

看一下他的 slogan ：

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

打開像 URL、文件、可執(zhí)行文件之類的東西?？缙脚_。

它有以下優(yōu)點：

• 這個倉庫更新維護及時

• 豐富的參數(shù)

• 安全性

• 解決了大多數(shù) node-open 產(chǎn)生的問題

• 跨平臺

open 的實現(xiàn)原理

入口文件：

定位到 open 函數(shù)：

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

可以看到核心實現(xiàn)邏輯在 baseOpen 函數(shù)：

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 屬性來獲取當前操作系統(tǒng)平臺的值。字符串 'darwin' 用于標識 macOS。'win32' 則表示 windows操作系統(tǒng)了。

對不同操作系統(tǒng)進行不同的參數(shù)組織：

• macos : 根據(jù) options 中的參數(shù)一一添加到 cliArguments 變量中

• windows: 主要是獲取powershell程序的路徑。

• wsl：根據(jù)子系統(tǒng)掛載點路徑獲取

• win：根據(jù) process.env.SYSTEMROOT 獲取操作系統(tǒng)的根路徑

process.env.SYSTEMROOT 是一個由 Node.js 提供的全局變量，表示當前系統(tǒng)的根目錄的路徑。 在 Windows 操作系統(tǒng)中，根目錄通常是 C:\Windows。在其他操作系統(tǒng)中，此變量的值可能為空或不存在。

之后使用 Node.js child_process 模塊中的 childProcess.spawn 函數(shù)，以啟動新的子進程并執(zhí)行命令。

它將 command 和 cliArguments 變量作為參數(shù)傳遞給 childProcess.spawn，以及一個名為 childProcessOptions 的對象，該對象包含子進程的選項。

childProcess.spawn 函數(shù)返回一個表示已生成子進程的 ChildProcess 對象。如果 options.wait 屬性為 true，則代碼會返回一個新的 Promise，該Promise 對象根據(jù)子進程的回調函數(shù)做出reject或者resolve回應。

兩個事件：

• 'error' 事件偵聽 器會監(jiān)控到發(fā)生的錯誤，reject.

• 'close' 事件偵聽 器會在退出代碼為零（或 options.allowNonzeroExitCode 屬性為 true）時使用 subprocess 對象解析承諾。如果退出代碼為非零且 options.allowNonzeroExitCode 屬性為 false，則 reject('錯誤代碼')

最后使用 subprocess.unref 方法保持子進程運行，目的是為了使子進程在后臺運行。

以上就是“open打開瀏覽器的原理是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。