Ejs-based template compilation plug-in and working method thereof

Abstract

The present application relates to a kind of based on the working method of ejstemplate compilation plug-in, the plug-in includes environment variable setting module, ejs template engine, judging module, copy module, reading module, output module and packing module, environment variable setting module is used to set environment variable;Judging module is used to judge whether there is src / views directory, if it exists, delete src / views directory, execute the build logic of script;Copy module is used to copy src / templete to src / views directory;Reading module is used to read the file in templete, and by ejs template engine cyclic processing and conversion file;Output module is used to export the converted file to target directory src / views under;Packing module is used to start vue-cli-service build command, carries out project compilation packing, and after packing succeeds, generates dist file.

Description

Technical Field

[0001] This invention relates to the field of mobile R&D technology, specifically to a template compilation plugin based on EJS and its working method. Background Technology

[0002] The following content represents only the background technology possessed by the inventor and is not existing technology that the general public can readily access.

[0003] In existing technologies, vue-cli can package modules according to specified module paths, which can basically meet the development needs of different modes. However, it cannot completely eliminate the differences between common modules referenced by modules in different modes. For example, if module C is referenced in both mode A and mode B, and module C has different compatibility handling for scenarios A and B, existing technologies can only perform logical if / else judgments and cannot achieve file-level cleanup.

[0004] The problem with this is that while the A / B mode can be identified at compile time, compatibility measures implemented for A / B mode development are also packaged and deployed, making the online package for either A or B mode actually a hybrid A / B mode package. This results in package redundancy and introduces some unpredictable risks (after all, code not using the current mode is also online). Summary of the Invention

[0005] This invention aims to provide a template compilation plugin based on EJS and its working method. The technical problem to be solved is how to truly remove compatibility files under different compilation conditions and solve the problems of redundancy and risk in the existing technology.

[0006] The purpose of this invention is to address the shortcomings of existing technologies and provide an EJS-based template compilation plugin, including an environment variable setting module, an EJS template engine, a judgment module, a copy module, a reading module, an output module, and a packaging module. The environment variable setting module is used to set environment variables. The judgment module determines whether the `src / views` directory exists; if it does, it deletes the `src / views` directory and executes the script's build logic. The copy module copies `src / template` to the `src / views` directory. The reading module reads files from the `template` directory, and the EJS template engine processes and transforms these files in a loop. The output module outputs the transformed files to the target directory `src / views`. The packaging module starts the `vue-cli-service build` command, compiles and packages the project, and generates a `dist` file upon successful packaging.

[0007] Preferably, the ejs-based template compilation plugin further includes a parameter insertion module, which is used to insert the parameters required by the ejs template engine according to environment variables while the ejs template engine is processing the file in a loop.

[0008] Preferably, the parameters required by the ejs template engine include {plat, build_env}.

[0009] Preferably, the ejs-based template compilation plugin also includes chokidar, which is started via node to monitor changes in files in the template and call build.

[0010] Preferably, the ejs-based template compilation plugin also includes a monitoring module, which is used to start the vue-cli-service serve command and monitor file changes in the src / views directory.

[0011] Preferably, the ejs-based template compilation plugin is configured with the source file address and target file address before startup. After the ejs-based template compilation plugin is started, the ejs template engine loads the file according to the source file address, compiles the file and outputs it to the target file address. When the compilation mode is "watch", Chokidar monitors changes in the source file and modifies the target file accordingly.

[0012] Preferably, the ejs-based template compilation plugin enables compilation processing before webpack starts.

[0013] Preferably, the ejs-based template compilation plugin can simultaneously process various types of front-end files, including js, css, html, vue, scss, jx, ts and json.

[0014] Preferably, the handlebars template engine is used instead of the ejs template engine.

[0015] This invention also provides a method for working with an EJS-based template compilation plugin, comprising the following steps:

[0016] Step 1: Set environment variables;

[0017] The second step is to determine if the src / views directory exists. If it does, delete the src / views directory and execute the script's build logic.

[0018] Step 3: Copy src / templete to the src / views directory;

[0019] Step 4: Read the files in the template and have the ejs template engine process and transform them in a loop; at the same time, insert the parameters required by the ejs template engine according to the environment variables.

[0020] Step 5: Output the converted files to the target directory src / views;

[0021] Step 6: Start Chokidar via node to monitor changes in the files in the template and call the build function;

[0022] Step 7: Start the `vue-cli-service serve` command and monitor changes to files in the `src / views` directory;

[0023] Step 8: Start the vue-cli-service build command to compile and package the project, and generate the dist file after successful packaging.

[0024] Beneficial effects

[0025] Compared with the prior art, the beneficial effects of the present invention are:

[0026] 1. The template compilation plugin based on EJS described in this invention is different from webpack-related plugins on the market, which all perform corresponding processing during the webpack execution phase. The plugin described in this invention can perform compilation processing before webpack starts.

[0027] 2. Unlike webpack plugins that can only handle a specific file type, this plugin can handle all the most common front-end file types simultaneously: js, css, html, vue, scss, jx, ts, json...

[0028] 3. The template compilation plugin based on EJS described in this invention integrates the EJS template engine, and differs in that: ① EJS syntax is used in the comment mode of various file types, without destroying the source file format; ② The plugin described in this invention draws on similar ideas to the Koa onion model and axios interceptors, and customizes the file loader to achieve a flexible file processing mechanism. Attached Figure Description

[0029] The accompanying drawings are provided to further understand the technical solutions of the present invention and constitute a part of the specification. They are used together with the specific embodiments of this application to explain the technical solutions of the present invention and do not constitute a limitation on the technical solutions of the present invention.

[0030] Figure 1 This is a flowchart illustrating how the EJS-based template compilation plugin works with a webpack project, as described in this invention. Detailed Implementation

[0031] The invention is described in more detail below to aid in understanding it.

[0032] like Figure 1 As shown, the EJS-based template compilation plugin of this invention includes an environment variable setting module, an EJS template engine, a judgment module, a copy module, a reading module, an output module, and a packaging module. The environment variable setting module is used to set environment variables; the judgment module is used to determine whether the src / views directory exists, and if it exists, deletes the src / views directory and executes the script's build logic; the copy module is used to copy src / templete to the src / views directory; the reading module is used to read the files in the template, and the EJS template engine processes and transforms the files in a loop; the output module is used to output the transformed files to the target directory src / views; the packaging module is used to start the vue-cli-service build command, compile and package the project, and generate a dist file after successful packaging.

[0033] Preferably, the ejs-based template compilation plugin further includes a parameter insertion module, which is used to insert the parameters required by the ejs template engine according to environment variables while the ejs template engine is processing the file in a loop.

[0034] Preferably, the parameters required by the ejs template engine include {plat, build_env}.

[0035] Preferably, the ejs-based template compilation plugin also includes chokidar, which is started via node to monitor changes in files in the template and call build.

[0036] chokidar is a Node.js module for monitoring folder changes, used to listen for changes such as moving, adding, deleting, and modifying files.

[0037] Preferably, the ejs-based template compilation plugin also includes a monitoring module, which is used to start the vue-cli-service serve command and monitor file changes in the src / views directory.

[0038] Preferably, the ejs-based template compilation plugin is configured with the source file address and target file address before startup. After the ejs-based template compilation plugin is started, the ejs template engine loads the file according to the source file address, compiles the file and outputs it to the target file address. When the compilation mode is "watch", Chokidar monitors changes in the source file and modifies the target file accordingly.

[0039] Preferably, the ejs-based template compilation plugin enables compilation processing before webpack starts.

[0040] Preferably, the ejs-based template compilation plugin can simultaneously handle the most common types of front-end files: js, css, html, vue, scss, jjsx, ts, json, etc.

[0041] Preferably, the handlebars template engine can replace the ejs template engine and can also achieve the functions of the present invention; therefore, the handlebars template engine can be an alternative.

[0042] This invention also provides a method for working with an EJS-based template compilation plugin, comprising the following steps:

[0043] Step 1: Set environment variables;

[0044] The second step is to determine if the src / views directory exists. If it does, delete the src / views directory and execute the script's build logic.

[0045] Step 3: Copy src / templete to the src / views directory;

[0046] Step 4: Read the files in the template and have the ejs template engine process and transform them in a loop; at the same time, insert the parameters required by the ejs template engine according to the environment variables.

[0047] Step 5: Output the converted files to the target directory src / views;

[0048] Step 6: Start Chokidar via node to monitor changes in the files in the template and call the build function;

[0049] Step 7: Start the `vue-cli-service serve` command and monitor changes to files in the `src / views` directory;

[0050] Step 8: Start the vue-cli-service build command to compile and package the project, and generate the dist file after successful packaging.

[0051] Preferably, if changes are detected in the file in the template in step six, the compilation process of copying the file from the template to the views is triggered.

[0052] The plugin described in this invention is a compileWithEjs.js template compilation plugin developed based on the EJS template engine and the Chokidar file change monitoring plugin. It can truly remove compatibility files under different compilation conditions and solve the problems of redundancy and risk.

[0053] The key technical aspect of this invention is a front-end project pre-compiler. Pre-compilation is used in front-end projects based on webpack (a front-end module management and bundling tool), allowing source files to be compiled before webpack starts.

[0054] The execution principle of the template compilation plugin based on EJS described in this invention is as follows: Before the plugin starts, the source file and target file address are configured. After the plugin starts, EJS loads the file, compiles the file, and outputs it to the target file address according to the source file address. When the compilation mode is "watch", Chokidar monitors changes in the source file and modifies the target file accordingly.

[0055] The preferred embodiments of the present invention have been described above, but are not intended to limit the invention. Those skilled in the art can make modifications and variations to the embodiments disclosed herein without departing from the scope and spirit of the invention.

Claims

1. A template compilation plugin based on EJS, characterized in that, The EJS-based template compilation plugin includes an environment variable setting module, an EJS template engine, a judgment module, a copy module, a read module, an output module, and a packaging module. The environment variable setting module sets environment variables. The judgment module checks if the `src / views` directory exists; if it does, it deletes the `src / views` directory and executes the script's build logic. The copy module copies `src / templete` to the `src / views` directory. The read module reads files from the `templete` file, which are then processed and transformed by the EJS template engine. The output module outputs the transformed files to the target directory `src / views`. The packaging module starts the `vue-cli-service build` command, compiles and packages the project, and generates a `dist` file upon successful packaging. The EJS-based template compilation plugin also includes a parameter insertion module, which inserts the necessary parameters from the EJS template engine based on environment variables while the engine processes the files. The ejs-based template compilation plugin also includes chokidar, which is started via node to monitor changes in files in the template and call the build function. The ejs-based template compilation plugin also includes a monitoring module, which is used to start the vue-cli-service serve command and monitor file changes in the src / views directory.

2. The template compilation plugin based on EJS according to claim 1, characterized in that, The parameters required by the ejs template engine include {plat, build_env}.

3. The template compilation plugin based on EJS according to claim 1, characterized in that, Before starting, the EJS-based template compilation plugin configures the source file address and target file address. After starting the EJS-based template compilation plugin, the EJS template engine loads the file according to the source file address, compiles the file, and outputs it to the target file address. When the compilation mode is "watch", Chokidar monitors changes in the source file and modifies the target file accordingly.

4. The template compilation plugin based on EJS according to any one of claims 1 to 3, characterized in that, The ejs-based template compilation plugin enables compilation processing before webpack starts.

5. The template compilation plugin based on EJS according to claim 1, characterized in that, The ejs-based template compilation plugin can process various types of front-end files simultaneously, including js, css, html, vue, scss, jx, ts and json.

6. The template compilation plugin based on EJS according to any one of claims 1 to 3 or claim 5, characterized in that, The handlebars template engine is used instead of the ejs template engine.

7. A working method for a template compilation plugin based on EJS, characterized in that, Includes the following steps: Step 1: Set environment variables; The second step is to determine if the src / views directory exists. If it does, delete the src / views directory and execute the script's build logic. Step 3: Copy src / templete to the src / views directory; Step 4: Read the files in the template and have the ejs template engine process and transform them in a loop; at the same time, insert the parameters required by the ejs template engine according to the environment variables. Step 5: Output the converted files to the target directory src / views; Step 6: Start Chokidar via node to monitor changes in the files in the template and call the build function; Step 7: Start the `vue-cli-service serve` command and monitor changes to files in the `src / views` directory; Step 8: Start the vue-cli-service build command to compile and package the project, and generate the dist file after successful packaging.

Images