## 前言 opn模塊通常是作為跨平臺的打開文件或者網站的模塊，在web應用中最常見的使用是比如項目開發或者啟動的時候打開瀏覽器進行訪問。 ## 優點 * 長期維護 * 支持應用參數 * 因為它使用spawn而不是更安全exec * 修復了大部分未node-open解決的問題 * 包含Linux 的最新xdg-open腳本 ## 模塊地址 https://npm.taobao.org/package/opn ## 基本使用 ### 安裝 `$ npm install opn` ### 使用 ~~~ const opn = require('opn'); // Opens the image in the default image viewer opn('unicorn.png').then(() => { // image viewer closed }); // Opens the url in the default browser opn('http://sindresorhus.com'); // Specify the app to open in opn('http://sindresorhus.com', {app: 'firefox'}); // Specify app arguments opn('http://sindresorhus.com', {app: ['google chrome', '--incognito']}); ~~~ ## api ### 目標 類型為字符串。 目標通常為你想打開的文件、url或者可執行的文件，一般會用系統中默認的應用打開，當然也可以指定應用以及相關的開啟參數。 ### 配置項 類型為對象，object。 - wait 等待，布爾型 默認為false，不需要等待。 - app 指定打開的應用,字符串類型 windows平臺必須設置app,可以設置相關的app啟動參數，特殊說明，chrome的指定字符串， win ： chrome ，mac :google chrome,linux:google-chrome ## 實踐 自己在本地寫了一個demo，可以實現這個模塊的使用，在使用的時候大家要注意我們除了常規的gulp調用模塊之外也可以直接用npm工作流來實現我的需求，在根目錄下新建scripts文件夾，寫對應的功能js文件，然后在package.json中直接node 執行這個文件即可。 ~~~ //package.json "scripts": { "test": "teset", "opn": "gulp ", "opn2":"node ./scripts/opn" }, ~~~ ~~~ //gulpfile.js let gulp = require("gulp") let opn = require("opn") let os = require("os") let uri="http://www.baidu.com" gulp.task("default",function(){ let osStr=os.platform() if(osStr.indexOf("win")>-1){ opn(uri, { app: ['chrome'] }); } }) ~~~ ~~~ // opn.js let opn = require("opn") let os = require("os") let osStr = os.platform() let uri = "http://www.baidu.com" if(osStr.indexOf("win")>-1){ opn(uri, { app: ['chrome'] }); } ~~~ ## 更多探索 我們知道默認的webpack也可以通過dev-server來實現啟動瀏覽器和服務，我們看下它是否也是依賴這個模塊實現的呢？ 在webpack-dev-server 的模塊中，生產依賴中，我們如愿找到了opn的模塊依賴，順便我扒一下它的github托管的源代碼，源文件地址：[webpack-dev-server](https://github.com/webpack/webpack-dev-server/blob/v2/bin/webpack-dev-server.js),在這個文件中，我們找到了 opn模塊的引入以及其對應的使用，在這里我先吧代碼搬下來，然后和大家一起分析下與我們的使用有何不同。 ### 代碼 ~~~ const open = require('opn'); if (options.open) { let openOptions = {}; let openMessage = 'Unable to open browser'; if (typeof options.open === 'string') { openOptions = { app: options.open }; openMessage += `: ${options.open}`; } open(uri + (options.openPage || ''), openOptions).catch(() => { console.log(`${openMessage}. If you are running in a headless environment, please do not use the open flag.`); }); } ~~~ ### 代碼分析 - 作為常識我們要知道引入的模塊我們一般不會更改的，所以定義用的const,同理大家在定義常量的時候也要注意這點；而在模塊內定義的變量盡量用let. - 作為常識，我們要知道對象的屬性未配置或者配置為undefined 轉為布爾均為false的，所以判斷其是否配置只需要 options.open即可 - 一個小功能需要的字段以及提示信息需要在功能開始之前進行定義，比如openOptions，openMessage - 針對引入的字段需要做嚴謹的判斷，比如配置項的options.open 的類型，如果存在的話，那么就需要指定對應的app，并修改其報文信息。 - 針對字符串的拼接盡量引用字符串的模板語法`${}` - 盡可能的簡化語法，簡單的字符串拼接不用單獨定義一個變量，`uri + (options.openPage || '')`，同時針對配置項的異常情況提供一個默認空字符串 - 針對模塊的使用異常，進行catch捕捉，如果感覺模塊本身的報錯不夠，可以追加自己業務的報錯信息。