在学会一些基础的概念之后,就可以通过一些简单的实践去完善我们学会的知识,加深印象。
所以这一节的话,用市面上比较通用的一个 babel 教程说明 -- 开发去除项目中 console.log
。大家都知道通常我们本地开发的时候,会使用 console.log
去打印相关的流程信息,便于我们调试以及排查解决问题。但是线上环境是不需要打印的,因为如果在线上环境打印日志记录的话,会暴露一些隐藏的信息,一方面不专业,另一方面不安全。
1. 创建项目目录
mkdir babel-console-clear && babel-console-clear
2. 初始化项目目录
2.1 初始化 node 应用
npm init
2.2 初始化 babel 配置文件
在根目录下面创建 .babelrc 文件,文件内容如下:
{
}
2.3 编写 clear 代码
在项目中安装 babel-cli。npm i babel-cli
。改装一下 package.json
文件。
{
"name": "babel-console-clear",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "babel index.js"
},
"author": "shuangyue <18795905365@163.com>",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.26.0"
}
}
这时候执行 npm run test
,出现下图所示,console.log
被打印了出来。
首先,我们查看 console.log
转化成 AST
后是什么样子, AST 生成网站
然后根据 AST
文件格式,编写 clear/index.js
文件代码:
module.exports = function () {
return {
visitor: {
ExpressionStatement (path, { opts }) {
const { object, property } = path.node.expression.callee;
if (object.name === "console") {
const isIgnore = (opts.ignore || []).find(ele => ele === property.name);
if (!isIgnore) path.remove();
}
}
}
}
}
在 .babelrc
文件引入刚才编写的插件
{
"plugins": [
[
"./src/clear"
]
]
}
再次执行,效果如下: