Tragedy caused by deleting the console statement

Preface ：

although babel-plugin-transform-remove-console It has not been updated for several years , But when packing, remove console The sentence is still relatively time-saving and labor-saving , So it is used in the project , I didn't expect it would be hard

The original question was simple , But sometimes not careful , It may waste a lot of time solving problems , So write a blog , Convenient for others

Quickly quickly your mother call you. , Please detour

1、 Installation and use

install

npm i babel-plugin-transform-remove-console

To configure (babel.config.js)

//  Store the plug-ins needed in the project release phase 
const productPlugins = []

//  If the user is running a package command (npm run build) Inject plug-ins into the array 
if (process.env.NODE_ENV === 'production') {
    
  // Release stage 
  productPlugins.push("transform-remove-console") 
}
module.exports = {
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
    
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

here , Use npm run build Command packaging will remove... From the file console sentence , After testing , That's true

2. Delete map file

later , In order to further reduce dist Volume of catalog , It was decided that productionSourceMap Set to false, The purpose is not to generate map The mapping file , This process is apart from the problem

2.1 What is? map file ？

Have a look first , Generated by default dist Catalog

• 4 individual js file ,4 individual map file
• js Catalog total 14M,4 individual map The file takes up 11M

These are a few map What exactly do documents do ？

Its main function is after packaging js Establish a mapping between the file and the source code file before packaging , In this way, although the code before and after packaging looks different , But when an error occurs at runtime , You can still locate the source file where the error occurred

Let's demonstrate

such as , We deliberately App.vue The following codes are included in

methods: {
    
    f1() {
    
      return a + 5
    },
  },
  created() {
    
    this.f1()
  },

Under development mode , Running the page , The error information is as follows

Click on the wrong file , You can also directly locate

After the project is packaged ？

After we pack , Running the code , Found a blank article in the console , Not that as long as there is map file , After a mistake , It will not only print errors on the console , Can you still locate the wrong source file ？

2.2 Vanished console

Think about it , When the program reports an error , Who outputs the error message in the console ？

For example, the following mistakes , Tips a is not defined

Obviously , By vue adopt console.error Printed on the console

But let's look at what we see above 4 individual js Document and 4 individual map After the file found that , None of them console sentence , Why? ？

The reason is clear , It is written by developers themselves console Statements and some dependencies introduced by programs console sentence , All be babel-plugin-transform-remove-console Plug in removed

original babel-plugin-transform-remove-console The plug-in can delete all files console sentence （ Isn't that for granted ）

2.3 How to solve

Actually , Official documents have long said

therefore , modify babel.config.js Middle configuration , Add exception for deletion , In this way, all the files console.error and console.warn Just keep it

here , You can view the package generated js and map In file , Filled with a large number of the above two statements

After repacking , Run again

It was found that the output was wrong , And prompt which source file the error occurred in

2.4 Cancel map file

Last , You can cancel the generation map The file

vue.config.js in

REPACK , And then run , Still include , But we can't locate the specific source file where the error occurred , But the generated file

go through dist/js Catalog , There is no such thing as map The file , Of course dist The volume of the directory is much smaller

When requested by the client , Will not download map file , So the speed will also increase

3. summary

babel-plugin-transform-remove-console The use of plug-ins is very simple , But if you read your posts carefully , It seems that they are all copied from the same template , Few people mention exclude The function of attributes , If you are a newcomer and encounter problems similar to the above , It may take a lot of time to solve , So write this blog , Convenient for others