Reviewing the code for King Crab, I found a lot of useless console.log(XXX) code in the project he was refactoring.
King Crab is going to search console.log globally and delete them one by one, but there are just too many in the code.
If you delete them one by one, it’s like holding hands with your best friend when you meet someone you like, and you want to do something, but you don’t want to do it.
So, the idea is to take all console.log(XXX) from the code and delete it, providing two solutions:
Plan a
The loader of Webpack is essentially a function inside which we can replace the string we want to delete by matching the re.
The code to customize loaders/ignore-console-log-loader.js is simple as follows:
const reg = /(console.log\()(.*)(\))/g
module.exports = function (sourceCode) {
return sourceCode.replace(reg, ' ')
}
Copy the codeUsing gestures, add the following custom loader to the webpack.config.js configuration file:
module: {
rules: [
{
test: /\.js$/.
loader: ['ignore-console-log-loader'].
},
]
},
resolveLoader: {
// Specify the location directory of the custom loader
modules: ['node_modules', path.resolve(__dirname, 'loaders')]
},
Copy the codeSource code package comparison before and after use:
const name = 'love'
console.log(name)
Copy the codeBefore use (normal packaging)
After use (remove console.log)
This approach is simple, but is sufficient for similarly simple requirements (match, delete, replace, and so on).
Just like love, don't need complicated vows of eternal love, just need simple you by my side.
Scheme 2
u
If you are not familiar with Babel, please leave a comment below, which is actually some content of compilation principle.
“
For example, several of the core steps of webPack packaging principles use Babel.
- Get the main entry content
- Analyze the main entry module (@babel/ Parser package, turn to AST)
- Handling module contents (@babel/traverse packets, traverse AST collection dependencies)
- Recurse all modules
- Generate the final code
Getting back to the point, we can customize the Babel Plugin to remove useless code.
Parsing the AST after the source code was taken with Babel, and then matching the target node, we converted and deleted the target node to generate a new AST (the AST after removing console.los(XXX)).
Take a look at the AST nodes we want to remove by converting them online at https://astexplorer.net/ :
From the diagram above, the requirements are clear.
Customize plugins/ignore-console-log-plugin.js with the following code: plugins/ignore-console-log-plugin.js
// The Babel version of the utility library, provides a lot of AST Node related utility functions
const types = require("@babel/types")
/ / rules
const map = new Map(a)
map.set('console'.'log')
// ...
module.exports = function declare() {
return {
name: "ignore-console-log".
visitor: {
ExpressionStatement(path) {
const expression = path.node.expression
if (types.isCallExpression(expression)) {
const callee = expression.callee
if (types.isMemberExpression(callee)) {
// 获取到 console
const objectName = callee.object.name
// Get the log
const propertyName = callee.property.name
// Rule hit
if (map.get(objectName) === propertyName) {
/ / remove
path.remove()
}
}
}
},
},
}
}
Copy the codeUsing gestures (in the Webpack project), add the following custom plugin to the webpack.config.js configuration file:
{
test: /\.js$/.
use: {
loader: 'babel-loader'.
options: {
"presets": ['@babel/preset-env'].
"plugins": ['./plugins/ignore-console-log-plugin.js']
}
},
exclude: '/node_modules/'
}
Copy the codeSource code package comparison before and after use:
const name = 'Think too much'
console.log(name)
Copy the codeBefore use (normal packaging)
After use (remove console.log)
summary
u
In this paper, the source code has included making https://github.com/ponkans, welcome to Star, continued 💧 water
“
There are many ways to solve the problem, choose the most appropriate and most comfortable.
Like feelings, no amount of bells and whistles, also arrived but we do not fit a few words.
I am a water monster, a small target with 3 years of working people 💪