<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
啟動專案時,在本地伺服器啟動後會自動幫我們開啟瀏覽器,程式是如何做到呢?又是哪些程式碼在起作用呢?希望通過本章節的學習,達成如下目標:
原始碼地址:sindresorhus/open
設定 webpack 的 devServer 選項:
module.exports = { //... devServer: { open: true, }, };
告訴 dev-server 在伺服器啟動後開啟瀏覽器。將其設定為 true 以開啟預設瀏覽器。
如果你使用的是 ue-cli
,則在啟動命令後面新增引數 --open
:
# yarn serve 不會自動開啟瀏覽器 yarn serve # --open 引數後會自動開啟瀏覽器 yarn serve --open
無論是webpack還是vue-cli,他們能夠實現在瀏覽器中開啟網頁的功能,主要依賴 open 這個包。
看一下他的 slogan :
Open stuff like URLs, files, executables. Cross-platform.
開啟像 URL、檔案、可執行檔案之類的東西。跨平臺。
它有以下優點:
得益於以上優點,這個包每週有兩千多萬的下載量:
入口檔案:
定位到 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程式的路徑。process.env.SYSTEMROOT
是一個由 Node.js 提供的全域性變數,表示當前系統的根目錄的路徑。 在 Windows 作業系統中,根目錄通常是 C:Windows
。在其他作業系統中,此變數的值可能為空或不存在。
之後使用 Node.js child_process
模組中的 childProcess.spawn
函數,以啟動新的子程序並執行命令。
它將 command
和 cliArguments
變數作為引數傳遞給 childProcess.spawn
,以及一個名為 childProcessOptions
的物件,該物件包含子程序的選項。
childProcess.spawn
函數返回一個表示已生成子程序的 ChildProcess
物件。如果 options.wait
屬性為 true
,則程式碼會返回一個新的 Promise,該Promise 物件根據子程序的回撥函數做出reject或者resolve迴應。
兩個事件:
options.allowNonzeroExitCode
屬性為 true
)時使用 subprocess
物件解析承諾。如果退出程式碼為非零且 options.allowNonzeroExitCode
屬性為 false
,則 reject('錯誤程式碼')最後使用 subprocess.unref 方法保持子程序執行,目的是為了使子程序在後臺執行。
總的來說,open原理是:針對不同的系統,使用Node.js的子程序 child_process 模組的spawn方法,呼叫系統的命令開啟瀏覽器。
通過本章節課程的學習,學習到了如何使用 nodejs 的內建模組對作業系統型別的判斷以及childProcess建立子程序的方式,更多關於open開啟瀏覽器原理的資料請關注it145.com其它相關文章!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45