手写微信小程序摇树优化工具（二）——遍历js文件

最新推荐文章于 2024-08-19 20:59:40 发布

姑老爷呀

最新推荐文章于 2024-08-19 20:59:40 发布

阅读量201

点赞数

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/129169021

版权

本文详细介绍了如何手写微信小程序的摇树优化工具，重点在于遍历js文件进行依赖收集。文章讲解了配置文件的设置，如sourceDir、targetDir、analyseDir等关键参数，并探讨了在遍历js文件时如何处理AST树和各种导入形式，包括相对路径、绝对路径、npm包等特殊情况。此外，还提到了特殊情况的解决方案，如白名单文件和动态加载文件的处理。

摘要由CSDN通过智能技术生成

1 基本摇树优化实现

上一章我们已经介绍了微信小程序的基本文件结构格式以及它的依赖形式，本章我们将开始进入编码阶段，我们使用node来实现这一个过程。

1.1 配置文件

首先我们需要一个配置文件来定义项目的路径和摇树之后代码的输出目录以及一些常用的变量等。摇树优化最重要的是不能改变源码，不然遍历之后你的源码全乱了，那可不是我想要的。因此我会将摇树优化的代码拷贝至另一个目录，相当于另一个目录就是精简版的小程序了，你上传这个目录的文件就行，再此期间源码是不会动的，无论你执行多少次摇树优化。

const path = require('path');

// 静态文件扩展名
const STATIC_File_EXTENDS = ['.jpg', '.png', '.jpeg', '.gif', '.webp', '.eot', '.ttf', '.woff', '.woff2', '.svg'];
// 小程序文件扩展名
const EXTENDS = ['.js', '.json', '.wxml', '.wxss'];
// 主包名称
const MAIN_PACKAGE_NAME = 'main_package';
// 排除的文件，不需要遍历
const EXCLUDE_FILES = ['package-lock.json', 'package.json'];
// 排除的npm包
const EXCLUDE_NPM = [];
// npm包正则匹配表达式，兼容mac和window
const NPM_REGEXP = path.sep === '/' ? /miniprogram_npm\/(.*?)\// : /miniprogram_npm\\(.*?)\\/;
// 分离npm包的正则匹配表达式，兼容mac和window
const SPLIT_NPM_REGEXP = path.sep === '/' ? /_npm\/(.*?)\// : /_npm\\(.*?)\\/;

class ConfigService {
 constructor(options) { // 源代码目标 this.sourceDir = options.sourceDir; // 代码输出目录 this.targetDir = options.targetDir; // 分析目录输出目录 this.analyseDir = options.analyseDir; // 组名称 this.groupName = options.groupName || 'sun'; // 静态文件扩展 this.staticFileExtends = options.staticFileExtends || STATIC_File_EXTENDS; // 文件扩展 this.fileExtends = options.fileExtends || EXTENDS; // 主包名称 this.mainPackageName = options.mainPackageName || MAIN_PACKAGE_NAME; // 需要排除的文件名称 this.excludeFiles = options.excludeFiles || EXCLUDE_FILES; // 独立分包需要排除的npm包名称 this.excludeNpms = options.excludeNpms || EXCLUDE_NPM; // 是否需要独立分包 this.isSplitNpm= options.isSplitNpm || false