搭建一个交互式的前端构建环境.md
为了提高开发效率、减少重复的操作,现在几乎全部的前端项目都需要依赖一些构建工具来实现自动化打包,主流的有webpack
, gulp
, grunt
等。加上各种各样的配置文件就会形成了一个相对复杂的构建环境。一般的,我们可以把构建项目需要用到的参数写死在配置文件,但是,有些是需要动态配置的那怎么办呢?比方说,我们用express
来启动本地服务器,这需要分配一个端口吧?写死一个端口如8080在配置文件是可以的,可是,如果端口被占用了那怎么办?难道要把占用端口的进程kill
掉、或者修改配置文件,再重新run
一次吗?如果把全部的参数都写死在配置文件里面,一旦启动了构建脚本,就如同脱僵之马,是不可控制的,会一直跑下去。那可以换个思路,能不能做一个交互式的脚本呢,就是启动了构建脚本之后,还允许我们插手去修改一些配置,比方说如果端口被占用了,可以在终端输入一个新的端口,然后继续运行项目,是不是会更加友好一些?
前端构建环境一般都是基于Node
脚本的。对于交互式操作,社区上有了个叫做 inquirer
的第三方库,至于这个库具体怎么用,这里就不说了,如果没有使用过的可以到官网看一下它的文档。
另外,我们还需要提前检查端口是否被占用了,可以使用第三方库portscanner
。就直接上一个demo哈:
const inquirer = require('inquirer');
const portscanner = require('portscanner');
const questions = [];
questions.push({
type: 'input',
name: 'port',
default: 3000, // 默认端口是3000
message: `请输入调试端口号`,
validate(input) {
const port = Number(input);
return new Promise((resolve, reject) => {
if (isNaN(port)) {
reject('端口号必须为数字');
} else {
// 检查端口是否被占用了,如果被占用则重新输入
portscanner.checkPortStatus(
port,
'127.0.0.1',
(error, status) => {
if (error) {
reject(error);
} else if (status === 'open') {
reject(`${port} 端口号已经被占用`);
} else {
resolve(true);
}
}
);
}
});
}
});
inquirer
.prompt(questions)
.then(answer => {
console.log(answer);
}).catch(console.log);
就这么简单的一个demo,下面就来测试一下它的效果。
输入3002,正常执行:
输入一个非数字的端口,就会提示如下错误,并要求重新输入:
如果端口被其他进程占用了,会提示如下错误 ,并要求重新输入:
关于输入端口的问题就写到这里了。
接下来,看一下稍微复杂一点的栗子,在启动项目之前,可以通过向上或向下箭头来选择项目,如图所示:
下面就step by step的说明一下如何实现这样的需求哈。
这一次,我们就来模拟真实一点的环境,假设有个projects的目录,它里面有很多的项目,分别叫做project1, project2, project3......。如下:
f2e-workflow
|--build
|--index.js
|--src
|--projects
|--project1
|--project2
|--project3
|--project4
|--package.json
如何遍历文件目录呢?有个很好用的库,叫做blob
。也不介绍如何使用了,还是直接上个例子吧。
const inquirer = require('inquirer');
const glob = require('glob');
const path = require('path');
// 项目的根目录
const projectRoot = path.resolve(__dirname, '../');
// 获取指定路径下的入口文件
const projects = {};
glob.sync(path.join(projectRoot, 'src/projects/*')).forEach((item) => {
const projectName = item.split('/').pop();
projects[projectName] = item;
});
const questions = [];
questions.push({
type: 'list', // 选择List类型,就可以通过上下移动键了
name: 'project',
message: '请选择需要运行的项目',
choices: Object.keys(projects)
});
inquirer
.prompt(questions)
.then(answer => {
// 选择了项目之后,就可以运行它了
console.log(answer);
}).catch(console.log);
现在我们的需要已经实现了,但是,还有个问题,就是如果项目太多,上下移动效率也不高,如果可以直接输入项目名称进行筛选那就完美了。这也很简单,社区有个叫做fuzzy
的第三方库,可以支持模糊模糊查询。然后,配合inquirer-autocomplete-prompt
这个库使用就好了。下面就是支持模糊查询优化过的代码:
const inquirer = require('inquirer');
const glob = require('glob');
const path = require('path');
const fuzzy = require('fuzzy');
// 项目的根目录在
const projectRoot = path.resolve(__dirname, '../');
// 注册一个inquirer的新类型
inquirer.registerPrompt('autocomplete', require('inquirer-autocomplete-prompt'))
// 获取指定路径下的入口文件
const projects = {};
glob.sync(path.join(projectRoot, 'src/projects/*')).forEach((item) => {
const projectName = item.split('/').pop();
projects[projectName] = item;
});
const questions = [];
questions.push({
type: 'autocomplete',
name: 'project',
message: '请选择需要运行的项目',
source(answers, input) {
input = input || '';
const projectNames = Object.keys(projects);
return new Promise(function(resolve) {
setTimeout(function() {
var fuzzyResult = fuzzy.filter(input, projectNames);
resolve(fuzzyResult.map(function(el) {
return el.original;
}));
}, 100);
});
}
});
inquirer
.prompt(questions)
.then(answer => {
// 选择了项目之后,就可以运行它了
console.log(answer);
}).catch(console.log);const inquirer = require('inquirer');
启动脚本后,可以输入关键字进行过滤,比如,输入2,就会默认匹配到project2:
OK,关于如何搭建一个交互式的前端构建环境就写这么多啦。如果有什么问题和建议欢迎发评论交流~
最后,demo的代码放到了github上面啦,可以点击这里,欢迎star~
搭建一个交互式的前端构建环境.md的更多相关文章
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境
用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...
- grunt搭建自动化的web前端开发环境(转)
1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...
- 使用grunt搭建自动化的web前端开发环境
使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...
- 搭建一个完整的Java开发环境
搭建一个完整的Java开发环境 作为一个Java程序员,配置一个java开发环境是必备的技能,今天给广大菜鸟初学者补上一课.环境的配置,大概就分三个1,JDK 2,Tomcat(或者其他的)3,ecl ...
- 搭建一个高可用的redis环境
一.环境准备 我的环境: Fedora 25 server 64位版 6台: 192.168.10.204 192.168.10.205 192.168.10.206 192.168.10.203 ...
随机推荐
- 新概念英语(1-9)How is Ema?
A:Hello Helen. B:Hi Steven. A:How are you today? B:I'm very well, thank you. And you? A:I'm fine tha ...
- python/socket编程之粘包
python/socket编程之粘包 粘包 只有TCP有粘包现象,UDP永远不会粘包. 首先需要掌握一个socket收发消息的原理 发送端可以是1k,1k的发送数据而接受端的应用程序可以2k,2k的提 ...
- codeforces 798c Mike And Gcd Problem
题意: 给出一个数列,现在有一种操作,可以任何一个a[i],用a[i] – a[i+1]和a[i]+a[i+1]替代a[i]和a[i+1]. 问现在需要最少多少次操作,使得整个数列的gcd大于1. 思 ...
- js 常用数组和字符串方法
javascript数组与字符串常用方法总结 最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位 ...
- sqlserver数据库导入Mysql数据库问题
近来遇到一个问题,之前的项目用的是SQLServer数据库,但是现在要换成MySQL数据库,所有整理了一些数据导入的步骤,供需要的人参考! 第一步: 第二步: 第三步: 第四步: 第五步: 第六步: ...
- [LeetCode] Count Different Palindromic Subsequences 计数不同的回文子序列的个数
Given a string S, find the number of different non-empty palindromic subsequences in S, and return t ...
- [LeetCode] Find Pivot Index 寻找中枢点
Given an array of integers nums, write a method that returns the "pivot" index of this arr ...
- 简明shell入门
- [HAOI 2008]糖果传递
Description 有n个小朋友坐成一圈,每人有ai个糖果.每人只能给左右两人传递糖果.每人每次传递一个糖果代价为1. Input 第一行一个正整数nn<=1'000'000,表示小朋友的个 ...
- codeforces 809E Surprise me!
Tired of boring dates, Leha and Noora decided to play a game. Leha found a tree with n vertices numb ...