使用NodeJS开发前端打包程序

简介: 使用NodeJS开发前端打包程序

   每种语言都有自己的优势,互相结合各取所长使程序执行起来效率更高或者哪种实现方式较简单就用哪个,NodeJS是利用子进程来调用系统命令或者文件,文档见http://nodejs.org/api/child_process.html ,NodeJS子进程提供了与系统交互的重要接口,其主要API有: 标准输入、标准输出及标准错误输出的接口。

NodeJS 子进程提供了与系统交互的重要接口,其主要 API 有:

标准输入、标准输出及标准错误输出的接口

child.stdin 获取标准输入

child.stdout 获取标准输出

child.stderr 获取标准错误输出

获取子进程的PID:child.pid

提供生成子进程的方法:child_process.spawn(cmd, args=[], [options])

提供直接执行系统命令的方法:child_process.exec(cmd, [options], callback)

提供调用脚本文件的方法:child_process.execFile(file, [args], [options], [callback])

提供杀死进程的方法:child.kill(signal='SIGTERM'

1、利用子进程调用系统命令(获取系统内存使用情况)

   新建nodejs文件,名为cmd_memory.js,代码如下:


var spawn = require('child_process').spawn;

free = spawn('free', ['-m']);


// 捕获标准输出并将其打印到控制台 free.stdout.on('data', function(data) { console.log('standard output:\n' + data);

});


// 捕获标准错误输出并将其打印到控制台 free.stderr.on('data', function(data) { console.log('standard error output:\n' + data);

});


// 注册子进程关闭事件 free.on('exit', function(code, signal) { console.log('child process eixt ,exit:' + code);

});

注意:运行该脚本和直接运行命令'free -m'的结果是一样的

2、利用NodeJS开发前端打包程序

       我们在做前端开发的时候经常会在部署上线的时候做程序的打包和合并,我们接下来就会对如何使用 node.js 开发前端打包程序做非常深入的讲解,希望能够帮到有需要的同学。

我们现在做前端开发更多的是多人共同协作开发,每个人负责不同的模块,便于开发和调试。这样就导致我们最后部署上线的时候需要把所有人开发的模块进行合并,生成单个或多个文件上线。如果手动合并的话肯定是费时又费力,而且非常容易出错,所以我们一般都是通过一些工具来实现自动合并的功能。

打包程序的原理非常简单,入口文件->寻找依赖关系->替换依赖关系->生成文件,其中中间的两个步骤是递归执行的。

我们先来看一下使用 node.js 如何完成一个简单的文件合并功能:

 

01// 打包文件内容
02 var contentList = [];
03 // 排重列表
04 var loadedFileList = {};
05
06 // 打包主程序
07 function combine(filePath){
08 // 这里获取入口文件的内容
09 var fileContent = fs.readFileSync(filePath);
10 // 遍历文件内容
11 fileContent.forEach(function(value){
12 // 这里的findImport是需要你来实现的方法,用正则来匹配依赖关系
13 var matchFile = findImport(value);
14 if(matchFile){
15 //如果匹配到依赖关系
16 If(!loadedFileList[matchFile]){
17 //如果依赖关系不在排重列表中,递归调用combine
18 combine(matchFile);
19 contentList.push(‘n’);
20 }
21 }else{
22 contentList.push(value);
23 }
24 });
25 }

       最后只要根据 contentList 里面的内容来生成文件就可以了,怎么样,是不是很简单呢?下面我们就要介绍另外一种方式,使用流来完成我们的打包程序。

在 node.js 中,流(Stream)是一个由不同对象实现的抽象接口。流可以是可读的、可写的、或者既可读又可写的。所有的流都是 EventEmitter 的实例。我们可以通过继承接口来构造我们自己所需要的流。在我们的打包程序里面需要两个流,一个负责按行输出文件内容,另外一个负责处理依赖关系。所有的文件内容都在这两个流里面循环流动,当所有的依赖关系都处理完毕之后就结束流动并生成对应的文件,这样就达到我们的目的了。

让我们先来看一下负责按行输出文件内容的流是怎么样的:

 

01 var Stream = require('stream').Stream,
02 util = require('util'),
03 path = require('path'),
04 fs = require('fs');
05
06 // 构造函数
07 function LineStream() {
08 this.writable = true;
09 this.readable = true;
10 this.buffer = '';
11 }
12
13 module.exports = LineStream;
14 // 继承流接口
15 util.inherits(LineStream, Stream);
16
17 // 重写write方法,所有pipe过来的数据都会调用此方法
18 LineStream.prototype.write = function(data, encoding) {
19 var that = this;
20 // 把buffer转换为string类型
21 if (Buffer.isBuffer(data)) {
22 data = data.toString(encoding || 'utf8');
23 }
24
25 var parts = data.split(/n/g);
26
27 // 如果有上一次的buffer存在就添加到最前面
28 if (this.buffer.length > 0) {
29 parts[0] = this.buffer + parts[0];
30 }
31
32 // 遍历并发送数据
33 for (var i = 0; i < parts.length - 1; i++) {
34 this.emit('data', parts[i]);
35 }
36 // 把最后一行数据保存到buffer,使传递过来的数据保持连续和完整。
37 this.buffer = parts[parts.length - 1];
38 };
39 // end方法,在流结束时调用
40 LineStream.prototype.end = function() {
41 // 如果还有buffer,发送出去
42 if(this.buffer.length > 0){
43 this.emit('data',this.buffer);
44 this.buffer = '';
45 }
46 this.emit('end');
47 };

       这样我们的 lineStream 就完成了,我们看到在 write 方法里面就做了一件事,分解传递过来的数据并按行发送出去,然后我们看下处理依赖关系的流 DepsStream。

 

01 var stream = require('stream').Stream;
02 var util = require('util');
03 var fs = require('fs');
04 var path = require('path');
05
06 module.exports = DepsStream;
07 util.inherits(DepsStream,stream);
08
09 function DepsStream(){
10 this.writable = true;
11 this.readable = true;
12 this.buffer = '';
13 this.depsList = [];
14 };
15
16 // 这里的write方法只发送数据,不对数据做任何的处理
17 DepsStream.prototype.write = function(data){
18 this.emit('data',data);
19 };
20
21 // 我们在这里重新pipe方法,使其能够处理依赖关系和生成最终文件
22 DepsStream.prototype.pipe = function(dest,opt){
23 var that = this;
24 function ondata(chunk){
25 var matches = findImport(chunk);
26 if(matches){
27 if(this.depsList.indexOf(matches) >= 0){
28 // 我们在这里把处理过后的数据pipe回lineStream
29 dest.write('n');
30 }else{
31 this.depsList.push(matches);
32 var code = getFileContent(matches);
33 // 我们在这里把处理过后的数据pipe回lineStream
34 dest.write('n' + code);
35 }
36 }else{
37 this.buffer += chunk + 'n';
38 }
39 }
40 function onend(){
41 // 生成最终文件
42 var code = this.buffer;
43 fs.writeFileSync(filePublishUrl,code);
44 console.log(filePublishUrl + ' combine done.');
45 }
46 // 监听end事件
47 that.on('end',onend);
48 // 监听data事件
49 that.on('data',ondata);
50 };
51
52 // end方法
53 DepsStream.prototype.end = function(){
54 this.emit('end');
55 };

      我们看到上面的程序里面我们在 pipe 方法里面监听了 end 事件和 data 事件,ondata 方法主要用来对数据进行处理,发现有依赖关系的话就获取对应依赖关系的文件并重新发回给 LineStream 进行处理。onend 方法用来生成最终的文件,我们来看一下最终的调用方法:

 

1 var fileStream = fs.createReadStream(filepath);
2 var lineStream = new LineStream();
3 var depsStream = new DepsStream();
4
5 fileStream.pipe(lineStream);
6 lineStream.pipe(depsStream);
7 depsStream.pipe(lineStream);


目录
相关文章
|
4天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
28 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
6天前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
48 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
138 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
13天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
118 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
26 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10

热门文章

最新文章

  • 1
    node-DeepResearch:开源复现版OpenAI Deep Research,支持多步推理和复杂查询的AI智能体
  • 2
    一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
  • 3
    一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
  • 4
    Node.js 中实现多任务下载的并发控制策略
  • 5
    深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
  • 6
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 7
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    28
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    48
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    92
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    138
  • 6
    详解智能编码在前端研发的创新应用
    94
  • 7
    智能编码在前端研发的创新应用
    81
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    118
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75