你不知道的opn模块

前言

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,在这个文件中,我们找到了 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捕捉,如果感觉模块本身的报错不够,可以追加自己业务的报错信息。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逆向技术

框架原理第一讲,熟悉常用的设计方式.(以MFC框架讲解)

          框架原理第一讲,熟悉常用的设计方式.(以MFC框架讲解) 一丶什么是框架,以及框架的作用 什么是框架?   框架,简而言之就是把东西封装好了...

23811
来自专栏SDNLAB

ODL源码分析之OpenFlowjava框架分析及hello消息流程

基于ODL开发已经有一段时间了,对于一个全新的平台,总是喜欢每隔一段时间就总结一番,本篇算是第一篇吧。下面会介绍以下内容: 1.openflow服务注册 2.n...

4076
来自专栏Linux驱动

22.Linux-块设备驱动之框架详细分析(详解)

本节目的:     通过分析块设备驱动的框架,知道如何来写驱动 1.之前我们学的都是字符设备驱动,先来回忆一下 字符设备驱动: 当我们的应用层读写(read()...

3985
来自专栏阮一峰的网络日志

PHP最佳实践

虽然名字叫《PHP最佳实践》,但是它主要谈的不是编程规则,而是PHP应用程序的合理架构。

2351
来自专栏破晓之歌

在React中使用Redux数据流(讲解比较清晰,差代码)

index.html-模板,server.js-构建跑项目,webpack-打包项目

852
来自专栏康怀帅的专栏

Bash echo read 命令详解

echo 命令用来输出内容,read 命令用于读取用户输入。 echo 高亮输出 格式如下: $ echo -e "\033[字背景颜色;文字颜色m字符串\03...

3095
来自专栏Debian社区

Linux 系统 vim 编辑器使用简明教程

vi(vim)是上Linux非常常用的代码编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。v...

1377
来自专栏Python小屋

使用Python读写文本文件内容

本文主要演示如何读写文本文件的内容,以及上下文管理语句with的用法。使用上下文管理语句with时,即使在操作文件内容时引发异常也能保证文件被正确关闭。 #'w...

2625
来自专栏你不就像风一样

Java中用final修饰参数的方法当传入i++时异常

我的项目是这样写项目运行不起来,具体原因我参考的 https://www.cnblogs.com/xiohao/p/4861500.html, 解决方法...

1053
来自专栏州的先生

如何提高爬虫效率?Python下简单的进程、线程效率对比

2416

扫码关注云+社区

领取腾讯云代金券