Shulou(Shulou.com)06/02 Report--

How to use node.js to develop front-end packaging programs, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

When we are doing front-end development, we often do program packaging and merging when deployment is online. We will then give a very in-depth explanation on how to use node.js to develop front-end packaging programs, hoping to help students in need.

We are now doing front-end development is more collaborative development, everyone is responsible for different modules, easy to develop and debug. As a result, when we deploy online, we need to merge the modules developed by everyone to generate single or multiple files online. Manual merging must be time-consuming and laborious, and it is very error-prone, so we usually use some tools to achieve automatic merging.

The principle of the packaging program is very simple: entry file-> find dependencies-> replace dependencies-> generate files, and the two steps in the middle are performed recursively.

Let's first take a look at how to do a simple file merge using node.js:

/ / package file content var contentList = []; / / rearrange the list var loadedFileList = {}; / / package main program function combine (filePath) {/ / get the contents of the entry file var fileContent = fs.readFileSync (filePath) here / / traversing the contents of the file fileContent.forEach (function (value) {/ / the findImport here is a method that you need to implement. Use rules to match the dependency var matchFile = findImport (value). If (matchFile) {/ / if it matches the dependency If (! loadedFileList [matchFile]) {/ / if the dependency is not in the scheduled list, recursively call combine combine (matchFile); contentList.push ('\ n') }} else {contentList.push (value);}});}

* you just need to generate files based on the contents of contentList. How about that? is it very simple? Next we will introduce another way to use streams to complete our packaging program.

In node.js, a Stream is an abstract interface implemented by different objects. Streams can be readable, writable, or both readable and writable. All streams are instances of EventEmitter. We can construct the flow we need by inheriting the interface. In our packaging program, we need two streams, one for outputting the contents of the file by line, and the other for handling dependencies. All the contents of the files circulate in these two streams, and when all the dependencies are processed, the flow ends and the corresponding files are generated, which achieves our goal.

Let's take a look at what the stream responsible for outputting the contents of the file by line looks like:

Var Stream = require ('stream'). Stream, util = require (' util'), path = require ('path'), fs = require (' fs'); / / Constructor function LineStream () {this.writable = true; this.readable = true; this.buffer ='';} module.exports = LineStream; / / inherited stream interface util.inherits (LineStream, Stream) / / override the write method, which will be called by all data from pipe LineStream.prototype.write = function (data, encoding) {var that = this; / / convert buffer to string type if (Buffer.isBuffer (data)) {data = data.toString (encoding | | 'utf8');} var parts = data.split (/\ nvar that g) / / add to the front if (this.buffer.length > 0) {parts [0] = this.buffer + parts [0] if the last buffer exists;} / / traverse and send the data for (var I = 0; I)

< parts.length - 1; i++) { this.emit('data', parts[i]); } // 把***一行数据保存到buffer，使传递过来的数据保持连续和完整。 this.buffer = parts[parts.length - 1]; }; // end方法，在流结束时调用 LineStream.prototype.end = function() { // 如果还有buffer，发送出去 if(this.buffer.length >

0) {this.emit ('data',this.buffer); this.buffer =';} this.emit ('end');}

So our lineStream is done, and we see that one thing is done in the write method, decomposing the passed data and sending it out by line, and then we take a look at the stream DepsStream that handles dependencies.

Var stream = require ('stream'). Stream; var util = require (' util'); var fs = require ('fs'); var path = require (' path'); module.exports = DepsStream; util.inherits (DepsStream,stream); function DepsStream () {this.writable = true; this.readable = true; this.buffer ='; this.depsList = [];} / / the write method here only sends data and doesn't do any processing of the data DepsStream.prototype.write = function (data) {this.emit ('data',data);}; / / We re-pipe the method here so that it can handle dependencies and generate the final file DepsStream.prototype.pipe = function (dest,opt) {var that = this Function ondata (chunk) {var matches = findImport (chunk); if (matches) {if (this.depsList.indexOf (matches) > = 0) {/ / We pipe the processed data back to lineStream dest.write ('\ n') here;} else {this.depsList.push (matches) Var code = getFileContent (matches); / / here we pipe the processed data back to lineStream dest.write ('\ n' + code);}} else {this.buffer + = chunk +'\ n' } function onend () {/ / generate the final file var code = this.buffer; fs.writeFileSync (filePublishUrl,code); console.log (filePublishUrl + 'combine done.');} / listen for end event that.on (' end',onend); / / listen for data event that.on ('data',ondata) }; / / end method DepsStream.prototype.end = function () {this.emit ('end');}

We see that in the above program, we listen for end events and data events in the pipe method. The ondata method is mainly used to process the data. If a dependency is found, the file corresponding to the dependency is obtained and sent back to LineStream for processing. The onend method is used to generate the final file. Let's take a look at the final calling method:

Var fileStream = fs.createReadStream (filepath); var lineStream = new LineStream (); var depsStream = new DepsStream (); fileStream.pipe (lineStream); lineStream.pipe (depsStream); depsStream.pipe (lineStream); after reading the above, have you mastered how to use node.js to develop front-end packaging programs? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.