Method for analyzing independent file code segment in React Native generation file

Abstract

The invention discloses a method for analyzing an independent file code segment in a React Native generation file. The method comprises the following steps: acquiring a bindle.js file generated by React Native; matching codes in the bindle.js file by adopting a preset rule to obtain a lexical flow containing a plurality of lexical units; detecting the lexical flow, and extracting a code segment of each individual file; the code segment is analyzed, and information of each independent file is obtained; and repeating the previous two operations until the information of all the independent files in the bundle. Js file is obtained. According to the method and the device, the code segment of each independent file is efficiently analyzed in the bind.js file generated by React Native. Compared with a traditional syntax tree analysis method, the method has the advantages that on the premise that high accuracy is guaranteed, memory occupation and the requirement for computing resources are remarkably reduced, and therefore the analysis speed is greatly increased.

Description

Technical Field

[0001] The present invention relates to the technical field of data analysis, and in particular to a method for parsing separate file code segments in a React Native generated file. Background Art

[0002] In React Native mobile application development, the generated bundle.js file contains all the code of the application. The general method is to parse the bundle.js file generated by React Native by using a syntax tree analysis algorithm to convert the code into a tree structure and extract the code segments of each individual file. This method can accurately locate and process specific files, improve development efficiency and improve the development experience.

[0003] The following problems exist when parsing individual file code segments in the bundle.js file generated by React Native based on the syntax tree analysis algorithm. Large memory usage: The syntax tree analysis algorithm may cause a significant increase in memory usage when parsing complex bundle.js files. For large React Native projects, the bundle.js file may contain a large amount of code and complex nested structures, which will cause the generated syntax tree to be very large. Large memory usage may cause the operating environment to be unstable and even cause memory overflow problems. Slow analysis speed: Building a complete syntax tree requires in-depth analysis and parsing of the entire bundle.js file, which will result in a slow analysis speed. For developers, especially in scenarios where code segments need to be extracted frequently, long waits may reduce development efficiency and delay project progress.

[0004] Therefore, the present invention provides a method for parsing a separate file code segment in a React Native generated file, so as to at least solve some of the above technical problems. Summary of the invention

[0005] The technical problem to be solved by the present invention is to provide a method for parsing a separate file code segment in a React Native generated file, so as to at least solve part of the above technical problems.

[0006] To achieve the above purpose, the technical solution adopted by the present invention is as follows: The method for parsing a separate file code segment in a React Native generated file provided by the present invention comprises the following steps: Step 1. Get the bundle.js file generated by React Native. Step 2: Use the preset rules to match the code in the bundle.js file to obtain a lexical stream containing multiple lexical units; Step 3: Detect the lexical stream and extract the code segment of each individual file; Step 4: Parse the code segment to obtain information about each individual file; Step 5. Repeat steps 3 and 4 until the information of all individual files in the bundle.js file is obtained.

[0007] Furthermore, the step 2 includes: step 21, initializing the state stack and putting the initial state into the state stack; step 22, based on the state stack, using preset rules to traverse and match the nested code in the bundle.js file, and storing the matching results in the lexical stream queue, wherein the matching includes matching regular literals, matching symbols, matching identifiers, matching strings, matching numeric literals, matching template strings, matching whitespace characters, and matching line terminators; step 23, respectively identifying the lexical units in the lexical stream queue to obtain a lexical stream containing multiple lexical units.

[0008] Furthermore, matching the regular literal includes: if the regular literal is matched, storing the regular literal in a lexical stream queue.

[0009] Furthermore, the matching symbol includes: if the symbol is matched, the following operations are performed: if the symbol is the left bracket of a parenthesis, and the previous lexical unit is not the first keyword with parentheses, and the first keyword includes for and while, then the parenthesis count is increased, the state in the parentheses is pushed into the stack, and the left bracket of the parenthesis is stored in the lexical stream queue; if the symbol is the left bracket of a curly brace, determine whether it is the left bracket after the second keyword, and the second keyword includes raise, =>, and default. If so, push a curly brace count into the stack, and mark the current curly brace as an expression, and store it in the curly brace. The left bracket of the parenthesis is added to the lexical stream queue; if the symbol is the right bracket of the parenthesis, the parenthesis count is reduced, and if the top state of the stack is in the parenthesis, the state in the parenthesis is popped; if the symbol is the right bracket of the curly brace, the following operations are further performed: if the top state of the stack is that the template string is being expanded and the curly brace stack matches, and there is content that matches the template string expansion after the current right bracket, then the string template is saved to the lexical stream queue, otherwise the template string expansion end is saved to the lexical stream queue; if the symbol is other symbols, other symbols include plus sign, minus sign, greater than sign and less than sign, and other symbols are stored in the lexical stream queue.

[0010] Further, the matching identifier includes: if any identifier is matched, storing the identifier into a lexical stream queue; The matching string includes: if any string is matched, storing the string into the lexical stream queue; The matching of digital literals includes: if any digital literal is matched, storing the digital literal into a lexical stream queue; The matching template string includes: if any template string is matched, the following operations are performed: if there is an expression expansion in the template string, the template string expansion state is pushed into the stack and the template string header is stored in the lexical stream queue, otherwise, the non-replaced template string is stored in the lexical stream queue; The matching of blank characters includes: if a blank character is matched, storing the blank character in a lexical stream queue; The matching of line terminators includes: if a line terminator is matched, storing the line terminator in the lexical stream queue; if a multi-line comment is matched, storing the multi-line comment in the lexical stream queue; if a single-line comment is matched, storing the single-line comment in the lexical stream queue; if an illegal character is matched, storing the illegal character in the lexical stream queue.

[0011] Furthermore, the step 3 includes: step 31, matching the code segmentation identifier of React Native in the lexical stream; step 32, recording the starting position of the currently matched code segmentation identifier and initializing the bracket counter; step 33, traversing the lexical units in the lexical stream, when traversing to the left bracket of the round bracket, the count of the bracket counter is increased by 1, when traversing to the right bracket of the round bracket, the count of the bracket counter is reduced by 1, when the count of the bracket counter is 0, recording the end position of the code segmentation identifier, extracting the content before the left bracket and the right bracket of the round bracket and recording it as a code segment of a separate file; when the count of the bracket counter is not 0, continuing to traverse the next lexical unit until the count of the bracket counter is 0.

[0012] Furthermore, the step 4 includes: parsing the code segment based on the parameter expression of the code segment identifier, obtaining the parameters in the code segment and extracting the parameters representing the file information, and obtaining the information of each individual file.

[0013] Furthermore, the parameters representing the file information include file name, code content, runtime ID, dependent file list, and debugging information.

[0014] Furthermore, step 5 also includes: creating a new file corresponding to the current single file in the file system according to the runtime ID, and writing the file name, code content, dependent file list, and debugging information into the created new file.

[0015] Compared with the prior art, the present invention has the following beneficial effects: The present invention is based on the lexical analysis algorithm to efficiently parse the code segments of each individual file in the bundle.js file generated by React Native. Compared with the traditional syntax tree analysis method, the present invention significantly reduces the memory usage and computing resource requirements while ensuring a high accuracy rate, thereby greatly improving the analysis speed. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 The present invention is a flow chart of the method. DETAILED DESCRIPTION

[0017] Terminology explanation: React Native (RN for short) is an open source cross-platform mobile application development framework.

[0018] The bundle.js file is the output product of webpack packaging. It is a JavaScript file that can be run directly in the browser.

[0019] ‌ES6 (ECMAScript 6) is the sixth version of the JavaScript language.

[0020] In order to make the purpose, technical solutions and advantages of the present invention clearer, the present invention is further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention. The terms "first", "second", etc. in the present invention are used to distinguish different objects, rather than to describe a specific order.

[0021] like Figure 1 As shown, the method for parsing a separate file code segment in a React Native generated file provided by the present invention includes the following steps: Step 1. Get the bundle.js file generated by React Native. Step 2: Use the preset rules to match the code in the bundle.js file to obtain a lexical stream containing multiple lexical units; Step 3: Detect the lexical stream and extract the code segment of each individual file; Step 4: Parse the code segment to obtain information about each individual file; Step 5. Repeat steps 3 and 4 until the information of all individual files in the bundle.js file is obtained.

[0022] The present invention adopts preset rules to quickly convert the bundle.js file generated by React Native into a series of lexical units, optimizes the code parsing process, reduces unnecessary memory usage and computing resource consumption, and thus improves the overall parsing speed. The present invention implements intelligent code segment extraction and can accurately extract the code segment of each individual file. This intelligent extraction method helps developers to optimize, debug and manage each file more conveniently, thereby improving overall development efficiency.

[0023] In one embodiment, step 2 includes: step 21, initializing the state stack and placing the initial state into the state stack, the state stack can match the nested code; step 22, based on the state stack, using preset rules to traverse and match the nested code in the bundle.js file, and storing the matching results in the lexical stream queue, the matching includes matching regular literals, matching symbols, matching identifiers, matching strings, matching numeric literals, matching template strings, matching blanks and matching line terminators; step 23, identifying the lexical units in the lexical stream queue respectively, and obtaining a lexical stream containing multiple lexical units. The lexical units include regular literals, symbols, identifiers, string literals, numeric literals, template strings, blanks, line terminator sequences, multi-line comments, single-line comments, marks before expressions, marks not before object literals, keywords followed by expressions, keywords not followed by line terminators, and line breaks.

[0024] Furthermore, the matching of regular literals includes: if a regular literal is matched, storing the regular literal, that is, a character string of "regular literal" into a lexical stream queue (token queue).

[0025] Further, the matching symbol includes: if the symbol is matched, the following operations are performed: if the symbol is a left bracket "(" of a parenthesis, and the previous lexical unit is not the first keyword with a parenthesis, and the first keyword includes for and while, then the parenthesis count is increased, the state in the parenthesis is pushed into the stack, and the string of the left bracket of the parenthesis, that is, "(", is stored in the lexical stream queue; if the symbol is a left bracket "{" of a curly brace, it is determined whether it is a left bracket after the second keyword, and the second keyword includes raise, =>, and default, for example, "raise {", if so, push a curly brace count, mark the current curly brace as an expression, and store the left brace of the curly brace, that is, the string "{", into the lexical stream queue; if the symbol is the right brace of the parenthesis ")", then reduce the parenthesis count, and if the top state of the stack is in the parentheses, then pop the state in the parentheses; if the symbol is the right brace of the brace "}", then further perform the following operations: if the top state of the stack is that the template string is being expanded and the curly brace stack matches, and there is content that matches the template string expansion after the current right brace, such as "}", then save the string in the string template, that is, "in the string template", to the lexical stream queue, otherwise save the string at the end of the template string expansion, that is, "end of the template string expansion", to the lexical stream queue; if the symbol is other symbols, other symbols include plus sign "+", minus sign "-", greater than sign ">" and less than sign "<", store other symbols, that is, "+" / "-" / ">" / "<" strings to the lexical stream queue.

[0026] Further, the matching identifier includes: if any identifier is matched, storing the identifier, i.e., the string of "identifier" into the lexical stream queue; The matching string includes: if any string is matched, storing the string, i.e., the string "string", into the lexical stream queue; The matching of digital literals includes: if any digital literal is matched, storing the digital literal, i.e., the string of "digital literal", into the lexical stream queue; The matching template string includes: if any template string is matched, the following operations are performed: if there is an expression expansion in the template string, the template string expansion state is pushed into the stack and the template string header, i.e., the string of "template string header", is stored in the lexical stream queue, wherein the template string header is the beginning character of the template string; otherwise, the non-replacement template string, i.e., the string of "non-replacement template string", is stored in the lexical stream queue; Template string is a new string literal introduced in ES6 that allows embedded expressions. It is an enhanced version of string, which uses backticks to replace double quotes and single quotes in ordinary strings; non-replacement template string is a template string without expression expansion, such as template string with expression `hello ${1 + 2 + 3}`. Template string with expression allows expression to be executed in the string and then replaced with the value of the expression into the string; non-replacement template string is a template string without expression, such as `hello 7 world`, that is, there is no ${xx} operation inside; template string with expression will be parsed into a lexical stream with expression inside, and template string without expression is just a string, corresponding to the lexical unit of the string.

[0027] The matching of blank characters includes: if a blank character is matched, storing the blank character, i.e., the string of "blank character" into the lexical stream queue; The matching line terminator includes: if a line terminator is matched, storing the line terminator, i.e., the string of "line terminator", into the lexical stream queue; if a multi-line comment is matched, storing the multi-line comment, i.e., the string of "multi-line comment", into the lexical stream queue; if a single-line comment is matched, storing the single-line comment, i.e., the string of "single-line comment", into the lexical stream queue; if an illegal character is matched, storing the illegal character, i.e., the string of "illegal character", into the lexical stream queue.

[0028] In one embodiment, step 3 includes: step 31, matching the code segmentation identifier of React Native in the lexical stream, that is, calling the identifier __d(); step 32, recording the starting position of the currently matched code segmentation identifier and initializing the bracket counter; step 33, traversing the lexical units in the lexical stream, when traversing to the left bracket "(" of the round bracket, the bracket counter count is increased by 1, and when traversing to the right bracket ")" of the round bracket, the bracket counter count is reduced by 1, and when the bracket counter count is 0, the end position of the code segmentation identifier is recorded, and the content before the left bracket and the right bracket of the round bracket is extracted and recorded as a code segment of a separate file; when the bracket counter count is not 0, continue to traverse the next lexical unit until the bracket counter count is 0.

[0029] In one embodiment, step 4 includes: parsing the code segment based on the parameter expression of the code segment identifier, obtaining the parameters in the code segment, that is, obtaining the parameter content between each comma, and extracting the parameters representing the file information to obtain the information of each individual file. Further, the parameters representing the file information include the file name, code content, runtime ID, dependent file list, and debugging information.

[0030] In one embodiment, step 5 also includes: creating a new file corresponding to the current single file in the file system according to the runtime ID, and writing the file name, code content, dependent file list, and debugging information into the created new file.

[0031] Finally, it should be noted that the above embodiments are only preferred embodiments of the present invention to illustrate the technical solutions of the present invention, rather than limiting them, and certainly not limiting the patent scope of the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions recorded in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention. In other words, any changes or modifications made to the main design concept and spirit of the present invention that have no substantive significance, and the technical problems they solve are still consistent with the present invention, should be included in the protection scope of the present invention. In addition, the direct or indirect application of the technical solutions of the present invention in other related technical fields is also included in the patent protection scope of the present invention.

Claims

1. A method for parsing a separate file code segment in a React Native generated file, characterized in that: The following steps are involved: Step 1. Get the bundle.js file generated by React Native. Step 2: Use the preset rules to match the code in the bundle.js file to obtain a lexical stream containing multiple lexical units; Step 3: Detect the lexical stream and extract the code segment of each individual file; Step 4: Parse the code segment to obtain information about each individual file; Step 5. Repeat steps 3 and 4 until the information of all individual files in the bundle.js file is obtained.

2. The method for parsing a separate file code segment in a React Native generated file according to claim 1, characterized in that: The step 2 includes: step 21, initializing the state stack and putting the initial state into the state stack; step 22, based on the state stack, using preset rules to traverse and match the nested code in the bundle.js file, and storing the matching results in the lexical stream queue, wherein the matching includes matching regular literals, matching symbols, matching identifiers, matching strings, matching numeric literals, matching template strings, matching whitespace characters, and matching line terminators; step 23, respectively identifying the lexical units in the lexical stream queue to obtain a lexical stream containing multiple lexical units.

3. The method for parsing a separate file code segment in a React Native generated file according to claim 2, characterized in that: The matching of regular literals includes: if a regular literal is matched, storing the regular literal in a lexical stream queue.

4. The method for parsing a separate file code segment in a React Native generated file according to claim 2, characterized in that: The matching symbol includes: if the symbol is matched, the following operations are performed: if the symbol is the left bracket of a round bracket, and the previous lexical unit is not the first keyword with round brackets, and the first keyword includes for and while, then the round bracket count is increased, the state in the round bracket is pushed into the stack, and the left bracket of the round bracket is stored in the lexical stream queue; if the symbol is the left bracket of a curly brace, determine whether it is the left bracket after the second keyword, and the second keyword includes raise, =>, and default. If so, push a curly brace count into the stack, mark the current curly brace as an expression, and store it in the curly brace. left bracket to the lexical stream queue; if the symbol is the right bracket of a round bracket, reduce the round bracket count, and if the top state of the stack is in the round bracket, pop the round bracket state; if the symbol is the right bracket of a curly bracket, further perform the following operations: if the top state of the stack is that the template string is being expanded and the curly bracket stack matches, and there is content that matches the template string expansion after the current right bracket, save the string template to the lexical stream queue, otherwise save the end of the template string expansion to the lexical stream queue; if the symbol is other symbols, other symbols include plus, minus, greater than and less than signs, and store other symbols in the lexical stream queue.

5. The method for parsing a separate file code segment in a React Native generated file according to claim 2, characterized in that: The matching identifier includes: if any identifier is matched, storing the identifier into a lexical stream queue; The matching string includes: if any string is matched, storing the string into the lexical stream queue; The matching of digital literals includes: if any digital literal is matched, storing the digital literal into a lexical stream queue; The matching template string includes: if any template string is matched, the following operations are performed: if there is an expression expansion in the template string, the template string expansion state is pushed into the stack and the template string header is stored in the lexical stream queue, otherwise, the non-replaced template string is stored in the lexical stream queue; The matching of blank characters includes: if a blank character is matched, storing the blank character in a lexical stream queue; The matching of line terminators includes: if a line terminator is matched, storing the line terminator in the lexical stream queue; if a multi-line comment is matched, storing the multi-line comment in the lexical stream queue; if a single-line comment is matched, storing the single-line comment in the lexical stream queue; if an illegal character is matched, storing the illegal character in the lexical stream queue.

6. The method for parsing a separate file code segment in a React Native generated file according to claim 1, characterized in that: The step 3 includes: step 31, matching the code segmentation identifier of React Native in the lexical stream; step 32, recording the starting position of the currently matched code segmentation identifier and initializing the bracket counter; step 33, traversing the lexical units in the lexical stream, when traversing to the left bracket of the round bracket, the count of the bracket counter is increased by 1, when traversing to the right bracket of the round bracket, the count of the bracket counter is reduced by 1, when the count of the bracket counter is 0, recording the end position of the code segmentation identifier, extracting the content before the left bracket and the right bracket of the round bracket and recording it as a code segment of a separate file; when the count of the bracket counter is not 0, continuing to traverse the next lexical unit until the count of the bracket counter is 0.

7. The method for parsing a separate file code segment in a React Native generated file according to claim 6, characterized in that: The step 4 includes: parsing the code segment based on the parameter expression of the code segment identifier, obtaining the parameters in the code segment and extracting the parameters representing the file information, and obtaining the information of each individual file.

8. The method for parsing a separate file code segment in a React Native generated file according to claim 7, characterized in that: The parameters representing the file information include the file name, code content, runtime ID, dependent file list, and debugging information.

9. The method for parsing a separate file code segment in a React Native generated file according to claim 8, characterized in that: The step 5 also includes: creating a new file corresponding to the current single file in the file system according to the runtime ID, and writing the file name, code content, dependent file list, and debugging information into the created new file.

Images