大家好，我是小小明，今天我要给大家分享一个用python实现的仿Linux的tree命令。

详见：https://pypi.org/project/filestools/

通过以下命令安装即可直接使用：

pip install filestools -U

安装后的使用示例：

对如何编码实现感兴趣的童鞋可以继续往下看。

Linux与Windows的tree命令

Linux的tree命令演示

在CentOS的Linux系统下，我们可以再使用yum命令安装tree之后使用tree。安装命令：

yum install tree

然后使用tree命令的树形显示效果：

[root@iZwz9afmmytm54pshbwmebZ 018]# tree
.
├── css
│   ├── abstract\ blue\ lights\ orange\ bokeh\ gaussian\ blur\ 1920x1200\ wallpaper_www.wallpaperhi.com_43.jpg
│   ├── default.css
│   ├── font
│   │   ├── DS-DIGIB.TTF
│   │   ├── DS-DIGII.TTF
│   │   ├── DS-DIGI.TTF
│   │   └── DS-DIGIT.TTF
│   ├── jquery-ui.css
│   ├── mobile.css
│   ├── normalize.css
│   └── style.css
├── images
│   ├── btn01slider2.png
│   ├── charts.png
│   ├── logofont.png
│   ├── logoline1.png
│   ├── logoline2.png
│   ├── logoline3.png
│   └── logoline.png
├── index.html
├── js
│   ├── common.js
│   ├── index.js
│   ├── jquery-1.8.3.min.js
│   └── jquery_and_jqueryui.js
└── less
    └── style.less

加上-C参数对各种类型加上不同的颜色：

加上-s参数能额外列出文件或目录的大小，-h参数用于自动修正显示单位：

tree命令参数说明：

• -a 显示所有文件和目录。
• -A 使用ASNI绘图字符显示树状图而非以ASCII字符组合。
• -C 在文件和目录清单加上色彩，便于区分各种类型。
• -d 显示目录名称而非内容。
• -D 列出文件或目录的更改时间。
• -f 在每个文件或目录之前，显示完整的相对路径名称。
• -F 在执行文件，目录，Socket，符号连接，管道名称名称，各自加上"*","/","=","@","|"号。
• -g 列出文件或目录的所属群组名称，没有对应的名称时，则显示群组识别码。
• -i 不以阶梯状列出文件或目录名称。
• -L level 限制目录显示层级。
• -l 如遇到性质为符号连接的目录，直接列出该连接所指向的原始目录。
• -n 不在文件和目录清单加上色彩。
• -N 直接列出文件和目录名称，包括控制字符。
• -p 列出权限标示。
• -P<范本样式> 只显示符合范本样式的文件或目录名称。
• -q 用"?"号取代控制字符，列出文件和目录名称。
• -s 列出文件或目录大小。
• -t 用文件和目录的更改时间排序。
• -u 列出文件或目录的拥有者名称，没有对应的名称时，则显示用户识别码。
• -x 将范围局限在现行的文件系统中，若指定目录下的某些子目录，其存放于另一个文件系统上，则将该子目录予以排除在寻找范围外。

Windows的tree命令

Windows上也有tree命令，只不过没有Linux平台的tree命令强大。

我们看看显示效果：

D:\QMDownload\source\test>tree /F
文件夹 PATH 列表
卷序列号为 5A3F-F8A8
D:.
│  index.html
│
├─css
│  │  abstract blue lights orange bokeh gaussian blur 1920x1200 wallpaper_www.wallpaperhi.com_43.jpg
│  │  default.css
│  │  jquery-ui.css
│  │  mobile.css
│  │  normalize.css
│  │  style.css
│  │
│  └─font
│          DS-DIGI.TTF
│          DS-DIGIB.TTF
│          DS-DIGII.TTF
│          DS-DIGIT.TTF
│
├─images
│      btn01slider2.png
│      charts.png
│      logofont.png
│      logoline.png
│      logoline1.png
│      logoline2.png
│      logoline3.png
│
├─js
│      common.js
│      index.js
│      jquery-1.8.3.min.js
│      jquery_and_jqueryui.js
│
└─less
        style.less

个人只能说勉强还行吧，也能看清楚树形结构。

Python自制tree命令

下面呢，我们考虑使用Python来仿制这样的命令。

os模块基础代码

关于Python打印树形目录结构，我已经在4年前使用Java写过一个不够完善的代码。19年国庆学python的时候才用os模块重写了一下：

import os


def show_dir(path, layer=0):
    listdir = os.listdir(path)
    for i, file in enumerate(listdir, 1):
        file_path = os.path.join(path, file)
        print("│  " * (layer - 1), end="")
        if (layer > 0):
            print("└─" if i == len(listdir) else "├─", end="")
        print(file)
        if (os.path.isdir(file_path)):
            show_dir(file_path, layer + 1)


show_dir("test")

结果：

css
├─abstract blue lights orange bokeh gaussian blur 1920x1200 wallpaper_www.wallpaperhi.com_43.jpg
├─default.css
├─font
│  ├─DS-DIGI.TTF
│  ├─DS-DIGIB.TTF
│  ├─DS-DIGII.TTF
│  └─DS-DIGIT.TTF
├─jquery-ui.css
├─mobile.css
├─normalize.css
└─style.css
images
├─btn01slider2.png
├─charts.png
├─logofont.png
├─logoline.png
├─logoline1.png
├─logoline2.png
└─logoline3.png
index.html
js
├─common.js
├─index.js
├─jquery-1.8.3.min.js
└─jquery_and_jqueryui.js
less
└─style.less

还行，但是对于很深的目录缺点也很明显，例如出现这样的显示情况：

Rich库的使用示例

要自行完全实现Linux的树形目录比较复杂，所幸python有个第三方库rich中的Tree模块能支持彩色和树形输出。

安装命令：

pip install rich

详细使用方式可以参考官方文档：https://rich.readthedocs.io/en/stable/

Tree模块的使用示例：https://github.com/willmcgugan/rich/blob/master/examples/tree.py

这个官方的代码示例就是专门用来树形显示目录的，我们可以复制粘贴到jupyter中稍微改改玩一下。

上述代码底部修改的部分：

directory = os.path.abspath("test")
tree = Tree(
    f":open_file_folder: [link file://{directory}]{directory}",
    guide_style="bold bright_blue",
)
walk_directory(pathlib.Path(directory), tree)
print(tree)

显示效果比Linux的tree命令更秀。不过这个脚本兼容性较差，Windows控制台并不支持显示图标之类的，导致会出现乱码：

调用Tree模块实现仿Linux树形显示目录效果

由于官方自带案例秀过头了兼容性不太好，所以我们自行编码：

"""
小小明的代码
CSDN主页：https://blog.csdn.net/as604049322
"""
__author__ = '小小明'

import os
import sys

import rich
from rich.text import Text
from rich.tree import Tree


def get_file_size(file):
    size = os.path.getsize(file)
    if size == 0:
        return "空文件"
    num = 0
    while size > 1024:
        size /= 1024
        num += 1
    unit = ["", "KB", "MB", "GB", "TB"]
    return f"{size:.2f}".rstrip(".0") + unit[num]


def show_dir(path, tree=None):
    if tree is None:
        tree = Tree(f"[bold magenta]{os.path.abspath(path)}")
    for file in os.listdir(path):
        file_path = os.path.join(path, file)
        if (os.path.isdir(file_path)):
            parent = tree.add(f"[bold magenta]{file}")
            show_dir(file_path, parent)
        else:
            text_filename = Text(file, "green")
            text_filename.highlight_regex(r"\.[^.]+$", "bold red")
            text_filename.append(f" ({get_file_size(file_path)})", "bold blue")
            tree.add(text_filename)
    return tree


if __name__ == '__main__':
    rich.print(show_dir(sys.argv[1]))

将以上代码保存为tree.py，然后在jupyter中执行：

from tree import show_dir
import rich

rich.print(show_dir("test"))

在Windows控制台中的执行结果：

python tree.py test

将脚本上传到Linux看下Linux下的执行效果：

可以看到我们自行编写的脚本已经能够同时适用于windows和Linux平台。

这就是tree模块核心逻辑的开发，至此我们的目标就已经达成。

这篇文章写于两年前，前端的发展日新月异，新的构建工具已经开始崭露头角。Vite已经出来很久了，新版本也比较稳定，推荐大家学习这一款构建工具。

Tree Shaking 指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。

官方有标准的说法：Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）

在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 Tree-Shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

在production 模式下不用在webpack.config.js中配置

optimization: {
usedExports: true

}
当在development模式下配置tree shaking时：
webpack.config.js

//HtmlWebpackPlugin
//当我们整个打包过程结束的时候，自动生成一个html文件，
//并把打包生成的自动引入到html这个文件中；
 
var HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //打包模式，当为‘production’，打包后的文件会被压缩，
    //当为‘development’时打包后的文件不会被压缩,按照开发环境进行打包
    mode: 'development', //在开发者模式中SourceMap默认已经被配置在项目里了。
    // devtool: 'none', //关闭SourceMap
    //cheap：在生成SourceMap的时候，可以不带列信息，只带行信息,不要包含loader里面的SourceMap的生成，
    //只对业务代码进行SourceMap的生成
    //module:对loader里面的代码也进行一个SourceMap的生成
    //eval：eval是一种执行方式
    devtool: 'cheap-module-eval-source-map', //打开SourceMap
    // devtool: 'cheap-module-source-map', //要线上的代码可以映射
    // 打包的入口文件
    entry: './src/index2.js',
    // entry: {
    //     main: './src/index2.js'
    // },
    devServer: {
        contentBase: './dist', //我们要在哪一个目录下去启动这个服务器
        open: true, //会自动的打开一个浏览器，然后自动访问服务器的地址（localhost:8080）
        hot: true, //指是否支持热更新（hmr）
        hotOnly: true, //即使不支持hmr或者hmr有问题,也不刷新浏览器
        proxy: {
            '/api': {
                //当访问localhost:8080/api的时，它会直接帮你转发到http://localhost:3000
                target: 'http://localhost:3000',
                pathRewrite: { '^/api': '' }
            }
        }
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        //url-loader会把图片转化成一个base64的字符串，
                        //然后直接放到bundle.js里，而不是单独生成一个图片文件，
                        //好处：不用再额外的请求图片的地址，省了一次http请求；
                        //缺点：如果图片特别大过大，打包生成的js文件就会很大，
                        //那么加载js文件的时间就会很长，所以在一开始很长的时间里，页面上什么都显示不出来；
                        //所以，url-loader最佳的使用方式：加一个limit
                        //如果图片小于limit的值就把图片变为一个base64的字符串放到打包好的js中，
                        //若大于limit的值，就以file-loader的生成一个图片放到dist目录下。
                        limit: 8192, //好处是可以对小图片的http请求数减少，提升网页加载数度
                        name: 'images/[name].[hash].[ext]'
                    }
                }
            },
            {
                test: /\.(css|scss|less)$/,
 
                //"css-loader":会帮我们分析出几个css文件之间的关系，最终把这些css文件合并成一段css;
                //"style-loader":会把‘css-loader’生成的内容挂在到页面的head部分
                //在webpack的配置中，loader是有先后执行顺序的，
                //loader的执行顺序是从下到上，从右到左；
                //“sass-loader”会先对sass代码进行翻译，翻译为css代码后给到css-loader,
                //都处理好了之后再交给‘style-loader’挂在到页面上
                //postcss-loader会自动添加css3的厂商前缀；比如：  transform: translate(100px, 100px)
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true //使得css模块化，
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                // 可以打包字体文件
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },
 
    // 打包的出口文件
    output: {
        // 打包后的文件名
        // filename: 'bundle.js',
        filename: '[name].js', //name就是entry值的key:'main','sub'
        // 打包后的文件目录为'dist'
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/' //表示的是我所有的打包生成的文件之间的引用前面都加一个根路径
    },
    //plugin可以在webpack运行到某个时刻的时候，帮你做一些事情(类似生命周期函数)
    plugins: [
        // CleanWebpackPlugin可以在每次打包的时候帮我们对dist目录做一个清空
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            //HtmlWebpackPlugin帮我们自动的生成一个dist目录下的html文件
            template: './src/index.html'
        }),
        //HotModuleReplacementPlugin帮我们实现HMR
        new webpack.HotModuleReplacementPlugin()
    ],
    //在开发模式下配置 tree shakeing
    optimization: {
        usedExports: true
    }
}

在 package.json 中配置:

{
    "name": "webpack-demo",
//@babel/polyfill和css文件不使用tree shaking
    "sideEffects": [
        "@babel/polyfill",
        "*.css"
    ],
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "bundle": "webpack",
        "watch": "webpack --watch",
        "start": "webpack-dev-server",
        "server": "node server.js"
    },
    "author": "susie",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.5.4",
        "@babel/plugin-transform-runtime": "^7.5.0",
        "@babel/preset-env": "^7.5.4",
        "@babel/preset-react": "^7.0.0",
        "autoprefixer": "^9.6.1",
        "babel-loader": "^8.0.6",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.0.0",
        "file-loader": "^4.0.0",
        "html-webpack-plugin": "^3.2.0",
        "node-sass": "^4.12.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "url-loader": "^2.0.1",
        "webpack": "^4.35.3",
        "webpack-cli": "^3.3.5",
        "webpack-dev-server": "^3.7.2"
    },
    "dependencies": {
        "@babel/polyfill": "^7.4.4",
        "@babel/runtime": "^7.5.4",
        "@babel/runtime-corejs2": "^7.5.4",
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    }
}

如果需要对某个模块不进行Tree Shaking

 "sideEffects": ["@babel/poly-fill"],  //该模块不进行Tree Shaking

为什么某些引入模块不希望进行Tree Shaking呢？

下面引入的style.css模块，如果也使用tree shaking，由于css文件没有导出任何模块，那么就有可能在打包的时候该引入模块就被摇晃掉了，导致bug。

在package.json中进行配置，即匹配到的任何css文件都不进行Tree Shaking

不使用Tree Shaking打包时，可以看到打包文件中exports provided: add, mins两种方法

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？


推荐阅读：
5分钟学会 vue 路由守卫
10分钟搞懂vuex
浅谈hooks
vue 组件设计原则
深入解读 vue 修饰符 sync