Every time I started the service of the project, the computer helped me open the browser, revealing the 100 lines of source code!

1.  Preface

Hello everyone , I am a

If Chuan

.

In order to help more interested in the source code 、 Want to learn to read the source code 、 Students who improve their front-end technical ability

. I tried my best to organize recently

Source code co reading activity

, Nearly one year has passed , Let's exchange and study together , Common progress , Many people said they had gained a lot .

Want to learn the source code , I highly recommend what I wrote before

《 Learn the whole source architecture series 》

  contain

jQuery

、

underscore

、

lodash

、

vuex

、

sentry

、

axios

、

redux

、

koa

、

vue-devtools

、

vuex4

、

koa-compose

、

vue 3.2  Release

、

vue-this

、

create-vue

、

toy vite

etc. 10 More than source code articles .

This article warehouse  open-analysis, Ask a star^_^

Recently organized

Source code co reading activity

, Let's learn the source code . So we search for all kinds of things worth learning , And the source code with few lines of code .

We often encounter similar scenes ：

Every time you start the project's service , The computer helped me open the browser

. Of course, you may not have met , But there may be such a need . And source code 300 Row or so , The core source code is less than 100 That's ok . Closely related to our work , It's worth learning .

Before written

It is said that  99%  People don't know  vue-devtools  You can also directly open the corresponding component file ？ The principle of this paper is revealed

, It is also similar to this article .

Read this article , You will learn ：

1.  The computer actually helped me open the browser principle and source code implementation
2.  Learn how to use  Node.js  Powerful  child_process  modular
3.  Learn to debug and learn the source code
4.  wait


2.  Use

2.1  stay  webpack  Use in

devServer.open

tell  

dev-server

  Open the browser after the server starts .  Set it to  true  To open your default browser .

webpack.config.js

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


Usage via the CLI:

npx webpack serve --open


To disable:

npx webpack serve --no-open


Now most of them don't use it directly  

webpack

  Configured with . Instead, use scaffolding . Then let's take a look at the familiar scaffold , How to use the function of opening the browser .

2.2  stay  vue-cli  Use

npx @vue/cli create vue3-project
#  my  open-analysis  In the project  vue3-project  Folder
# npm i -g yarn
# yarn serve  The browser will not open automatically
yarn serve
# --open  Parameter will automatically open the browser
yarn serve --open


2.3  stay  create-react-app  Use

npx create-react-app react-project
#  my  open-analysis  In the project  react-project  Folder
# npm i -g yarn
#  The browser is automatically opened by default
yarn start


The terminal I use is  

window terminal

, Recommend my previous articles ：

Use  ohmyzsh  make  windows、ubuntu、mac  System efficient terminal command line tool

, I've always said yes .

webpack

、

vue-cli

and

create-react-app

, They all have one characteristic, that is, they are used in the same way

open

.

quote  

open

  The respective code locations are ：

• webpack-dev-server

• vue-cli

• create-react-app

Then let's learn

open

Principle and source code .

3.  principle

stay  

npm

  King  

@sindresorhus

  Of  

open README file

in , Several reasons for using it are written in the English description .

Why is it recommended to use  

open

Actively maintain .
Support application parameters .
More secure , Because it uses  spawn  instead of  exec.
Fixed most of  node-open  The problem of .
Include for  Linux  The latest  xdg-open  Script .
Support  Windows  Application's  WSL  route .


One sentence summary

open

The principle is ： For different systems , Use

Node.js

Can be inherited by child processes.  

child_process

  Modular

spawn

Method , Call the system command to open the browser .

The simple form of the corresponding system command is ：

# mac
open https://lxchuan12.gitee.io
# win
start https://lxchuan12.gitee.io
# linux
xdg-open https://lxchuan12.gitee.io


windows start  file

open

Package description information ：

open

Here you can see what  npm  Package dependent  open

We are familiar with a lot  

npm

  Packages depend on

open

. Here are a few .

• webpack-dev-server

• react-dev-utils

• @vue/cli-shared-utils

• patch-package

• lighthouse

• release-it

4.  Preparation before reading the source code

#  Recommend cloning my project , Keep up with the article , At the same time, the test documents are complete
git clone https://github.com/lxchuan12/open-analysis.git
# npm i -g yarn
cd open && yarn

#  Or clone the official project
git clone https://github.com/sindresorhus/open.git
# npm i -g yarn
cd open && yarn


4.1  Write an example , Easy to debug source code

Because test cases are relatively complex , Let's write a simple example ourselves , It is convenient for us to debug .

according to  

README

, We are  

open-analysis

  Create a new folder under the folder  

examples

 , There's a... In it  

index.js

. The contents of the document are as follows ：

// open-analysis/examples/index.js
(async () => {
 const open = require('../open/index.js');
 await open('https://lxchuan12.gitee.io');
})();


stay  

await open('https://lxchuan12.gitee.io');

  Set a breakpoint . Execute... On the terminal command line

node examples/index.js


Will automatically evoke debug mode . If it is not supported, read the official document configuration first ：

Node.js debugging in VS Code

, If it still doesn't work , You can upgrade to the latest version

VSCode

try .

With debugging, we can enter  

open

  function .

4.2 open  Open function

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

 return baseOpen({
 ...options,
 target
 });
};


Follow breakpoint , Let's look at the final call  

baseOpen

. This function is longer , The point can be guessed to be ：

const subprocess = childProcess.spawn(command, cliArguments, childProcessOptions);

This sentence , We can plan breakpoint debugging .

4.3 baseOpen  Basic open function

// open/index.js
const childProcess = require('child_process');
const localXdgOpenPath = path.join(__dirname, 'xdg-open');

const {platform, arch} = process;
//  During debugging, we can adjust and modify the platform by ourselves , It is easy to debug the similarities and differences of various platforms , such as  mac、win、linux
// const {arch} = process;
// mac
// const platform = 'darwin';
// win
// const platform = 'win32';
// const platform = ' other ';

const baseOpen = async options => {
 options = {
 wait: false,
 background: false,
 newInstance: false,
 allowNonzeroExitCode: false,
 ...options
 };
 //  Omitted code
 //  command
 let command;
 //  Command line arguments
 const cliArguments = [];
 //  Subprocess options
 const childProcessOptions = {};
 if (platform === 'darwin') {
 command = 'open';
 //  Omit  mac  Part of the code
 } else if (platform === 'win32' || (isWsl && !isDocker())) {
 //  Omit  window  perhaps  window  Subsystem code
 const encodedArguments = ['Start'];
 } else {
 const useSystemXdgOpen = process.versions.electron ||
 platform === 'android' || isBundled || !exeLocalXdgOpen;
 command = useSystemXdgOpen ? 'xdg-open' : localXdgOpenPath;
 //  Omit  linux  Code
 }
 //  Omitted code
 const subprocess = childProcess.spawn(command, cliArguments, childProcessOptions);
 
 //  Omitted code
 subprocess.unref();

 return subprocess;
}


From this we can see ：

One sentence summary

open

The principle is ： For different systems , Use

Node.js

Can be inherited by child processes.  

child_process

  Modular

spawn

Method , Call the system command to open the browser .

The simple form of the corresponding system command is ：

# mac
open https://lxchuan12.gitee.io
# win
start https://lxchuan12.gitee.io
# linux
xdg-open https://lxchuan12.gitee.io


5.  summary

One sentence summary

open

The principle is ： For different systems , Use

Node.js

Can be inherited by child processes.  

child_process

  Modular

spawn

Method , Call the system command to open the browser .

This article starts from the daily common scenes

Every time you start the service, you can automatically open the browser

set out , Let's talk about the daily life in

webpack

、

vue-cli

、

create-react-app

How to use this function , Finally, it interprets

open

Principle and source code implementation . The knowledge commonly used in work can do

Know what it is , Know why

, It's better than many people .

Because the article should not be too long , So I haven't fully covered all the details in the source code . It is highly recommended that readers use

VSCode

debugging  

open

  Source code .

Learn to debug the source code , The source code is not as difficult as expected

.

Finally, you can continue to pay attention to me  @ If Chuan . Welcome to communicate with me , Participate in  

Source code read together

  Activities , We study together every week  200  Lines of source code , Common progress .