vue-cli3 single file and multi-file .html file preprocessing to delete some useless js files on demand

In the process of using vue-cli3, the local and test environments use conlog's js, but it is not used in the production environment. Deleting them one by one is easy to cause problems, and it is also easy to miss deletions. After a cursory look at the configuration file of vue-cli3, there is no I found a way to preprocess this type of file, but found that it could be processed in the form of a plug-in. Because I was not very familiar with plug-ins, I used node js file processing to delete all matching files using regular replacement.

This is the storage address of my multiple files after packaging.

This is the command I execute when deploying for production. It is very simple. After packaging, I execute my replacement file and replace all the matching html content.

Below is the main code, replacing and processing html.

var fs = require( 'fs' );
const glob = require('glob');
/**
 * html文件替换
 * @param src
 * @param dst
 */
var callbackFile = function( src ){
 fs.readFile(src,'utf8',function(error,data){
  if(error){
   console.log(error);
   return false;
  }
  let regJs = new RegExp(/<!--\[if !\(IE 5.5\)]><!-->[\s\S]*<!--<!\[endif]-->/,'g');
  let htmlContent = data.toString().replace(regJs,'');
  fs.writeFile(src,htmlContent,'utf8',function(error){
   if(error){
    console.log('Replacement error'); 
// Copy directory
};
 })
  })
   }
    return false;
glob.sync( './dist/*.html').forEach((filepath) => { 
 let fileNameList = filepath.split('.'); 
 let fileName = fileNameList[1].split('/')[ 2];//Multi-page page directory 
 //console.log(fileName) 
 let thisDirectory = `./dist/${fileName}.html`;//Multi-page JS file storage address 
 callbackFile(thisDirectory) 
});

glob.sync( './dist/*.html') You can change this to your own file path.

This is the source file, which is a browser judgment to determine whether it is IE5.5. The reason why it is written like this is because other comment methods will be automatically deleted by vue-cli3. Due to time reasons, there is no research on how to deal with it. Another way is to write a plug-in to perform the replacement operation during the compilation process. If someone knows how to do it, you can leave a message for guidance.

 

<!--[if !(IE 5.5)]><!-->
<script src="//www.baidu.comx/page/base/vconsole.min.js"></script>
<!--<![endif]-->

html source code

 

 

 

 

Guess you like

Origin blog.csdn.net/lizhen_software/article/details/93376811