工具箱是一个前端开发辅助工具集,它包含了以下组件:
抽象语法树转换编译原理:AST 转换编译原理 提供了编译原理的基础知识。
语法树格式化工具:AST Explorer 是一个在线工具,用于格式化和探索抽象语法树。
插件编写指南Babel 插件手册:Babel 插件编写手册 提供了编写Babel插件的详细指导。
JSCodemod 模板:JSCodemod 模板来源 提供了JS代码现代化的模板。
Vue Codemod 模板:Vue Codemod 模板来源 提供了Vue框架代码现代化的模板。
React Codemod 模板:React Codemod 模板来源 提供了React框架代码现代化的模板。
安装依赖:
git clone
npm i
命令行方式:
src/exec/xxx.ts
文件,将 new Exec('your dir')
中的 'your dir'
替换为您的目录路径。ts-node src/exec/xxx.ts
命令来运行您的插件。图形用户界面方式:
启动开发服务器: 在命令行中运行 npm run dev
命令,启动您的开发环境。
启动Electron应用: 接着,执行 npm run dev-electron
命令,以图形界面模式运行您的应用。
选择目录和执行插件: 在Electron界面中,选择您希望操作的目录和插件,然后执行它们。
应用安装方式
下载release,自己动手打包。产出文件大于100M,直接发布要收费,穷啊。
打开命令行工具: 首先,你需要打开命令行工具,比如Windows的CMD或者PowerShell(管理员)。
定位到项目目录:
使用cd
命令切换到包含项目文件的目录。
构建项目:
在项目目录中,运行以下命令来构建你的项目:npm run build
构建Electron应用:
如果你需要为Windows 64位系统构建Electron应用,运行:
npm run build-electron-win64
如果需要为macOS 64位系统构建Electron应用,运行:
npm run build-electron-mac64
macOS 应用需要进行代码签名才能被信任打开。这需要 Apple 开发者账号,通过 Xcode 或 electron-builder 进行签名。签名过程包括生成 CSR(Certificate Signing Request),下载并安装 Developer ID 证书,导出为 .p12 文件,并配置环境变量。 自 macOS 10.15 起,应用程序除了签名外还需要进行公证。这可以通过 electron-notarize 插件来实现,确保应用程序符合 Apple 的安全标准。 从 macOS 10.15 Catalina 开始,Apple 引入了更严格的权限和隐私保护措施,应用程序需要在 Info.plist 中声明对特定功能的访问请求,并且在运行时提供用户可接受的描述。 在 Info.plist 文件中添加权限请求时,需要确保添加正确的键和描述,以便系统能够正确地提示用户授权。例如:
<key>NSAppleEventsUsageDescription</key>
<string>This app requires access to send Apple events to other apps.</string>
找到安装文件:
构建完成后,你需要在dist
目录下的win
子目录中找到生成的.exe
安装文件。根据你提供的指令,文件名可能是node-toolkit-2.1.0-win-x64.exe
。
在macOS上,你需要在dist
目录下的mac
子目录中找到生成的.dmg
安装文件。
安装应用程序:
双击.exe
文件,按照安装向导的指示完成安装过程。
在macOS上,双击.dmg
文件,并按照安装向导的指示完成安装过程。
请注意,这些步骤假设你已经安装了Node.js和npm,并且你的项目已经配置了相应的构建脚本。如果你遇到任何问题,可能需要检查你的项目配置或查看项目的文档以获取更详细的安装指南。
src
├─ assets // 存放资源文件
│ ├─ icons // 图标资源
│ │ ├─ close-icon.svg
│ │ ├─ gitee-icon.svg
│ │ ├─ github-icon.svg
│ │ ├─ max-icon.svg
│ │ ├─ min-icon.svg
│ │ ╰─ restore-icon.svg
│ ╰─ images // 图片资源
│ ╰─ electron-img.png
├─ components // **组件目录**
│ ├─ antd-wrap // 封装antd组件
│ │ ├─ loading // 加载组件
│ │ │ ╰─ index.jsx
│ │ ├─ menus // 菜单组件
│ │ │ ├─ index.tsx
│ │ │ ╰─ use-context-menu.tsx
│ │ ├─ progress-bar // 进度条组件
│ │ │ ├─ index.tsx
│ │ │ ╰─ use-progress.ts
│ │ ╰─ search // 搜索组件
│ │ ╰─ reg-exp-input.tsx
│ ├─ app // 应用组件
│ │ ╰─ index.tsx
│ ├─ common // 通用组件
│ │ ╰─ loading.tsx
│ ├─ desktop-header // 桌面头部组件
│ │ ╰─ index.tsx
│ ├─ exception // 异常处理组件
│ │ ├─ exception401.jsx
│ │ ├─ exception403.jsx
│ │ ├─ exception404.jsx
│ │ ╰─ exception500.jsx
│ ├─ exec // 执行脚本组件
│ │ ├─ exec-babel.tsx
│ │ ├─ exec-file-statistical.tsx
│ │ ├─ exec-get-attrs-and-annotation.tsx
│ │ ├─ exec-jscodemod.tsx
│ │ ├─ exec-modify-file-names-batch.tsx
│ │ ├─ exec-postcss.tsx
│ │ ├─ exec-posthtml.tsx
│ │ ╰─ exec-reg-query-batch.tsx
│ ├─ file-manage // 文件管理组件
│ │ ├─ context.ts
│ │ ├─ directory.tsx
│ │ ├─ index.tsx
│ │ ├─ search.tsx
│ │ ├─ config // 配置相关
│ │ │ ├─ menus.tsx
│ │ │ ├─ options.ts
│ │ │ ╰─ table-column.tsx
│ │ ╰─ views // 视图相关
│ │ ├─ icon-view.tsx
│ │ ├─ preview.tsx
│ │ ╰─ table-view.tsx
│ ├─ home-page // 首页组件
│ │ ╰─ index.tsx
│ ├─ no-match // 无匹配页面组件
│ │ ╰─ index.jsx
│ ╰─ svg-icon // SVG图标组件
│ ╰─ index.tsx
├─ desktop // 桌面逻辑
│ ├─ handle.ts
│ ├─ index.ts
│ ├─ listen.ts
│ ├─ main-window.ts
│ ├─ menus.ts
│ ╰─ system-tray.ts
├─ exec // 执行逻辑
│ ├─ exec-babel-plugin.ts
│ ├─ exec-file-statistical.ts
│ ├─ exec-get-attrs-and-annotation.ts
│ ├─ exec-jscodemod.ts
│ ├─ exec-modify-file-names-batch.ts
│ ├─ exec-postcss-plugin.ts
│ ├─ exec-posthtml-plugin.ts
│ ├─ exec-reg-query-batch.ts
│ ├─ exec-transfer-file-name-To-kebab-case.ts
│ ╰─ index.ts
├─ file-manage // 文件管理逻辑
│ ╰─ index.ts
├─ layout // 布局组件
│ ╰─ index.tsx
├─ plugins // 插件目录
│ ├─ ast-utils.ts
│ ├─ sfc-utils.ts
│ ├─ use-babel-plugin.ts
│ ├─ use-codemod.ts
│ ├─ use-postcss-plugin.ts
│ ├─ use-posthtml-plugin.ts
│ ├─ babel-plugins // Babel插件
│ │ ├─ ast-utils.ts
│ │ ├─ extract-annotation.ts
│ │ ├─ import-sort.ts
│ │ ├─ move-default-export-to-last.ts
│ │ ├─ remove-invalid-comment.ts
│ │ ├─ replace-memberExpress-object-or-property.ts
│ │ ├─ sort-object-array-by-index.ts
│ │ ├─ transfer-file-name-tok-kebab-case.ts
│ │ ╰─ transform-remove-console.ts
│ ├─ jscodemods // JS代码修改工具
│ │ ├─ arrow-function.ts
│ │ ├─ no-reassign-params.ts
│ │ ├─ no-vars.ts
│ │ ├─ object-shorthand.ts
│ │ ├─ rm-object-assign.ts
│ │ ├─ rm-requires.ts
│ │ ├─ template-literals.ts
│ │ ╰─ unchain-variables.ts
│ ├─ postcss-plugins // PostCSS插件
│ │ ├─ property-sort.ts
│ │ ╰─ transfer-file-name-tok-kebab-case.ts
│ ╰─ posthtml-plugins // PostHTML插件
│ ├─ property-sort.ts
│ ╰─ transfer-file-name-tok-kebab-case.ts
├─ routers // 路由配置
│ ╰─ index.tsx
├─ slices // 状态切片
│ ╰─ directory-slice.ts
├─ store // 状态管理
│ ├─ index.ts
│ ╰─ use-directory.ts
├─ style // 样式目录
│ ╰─ less // 使用LESS作为CSS预处理器
│ ├─ app.less
│ ├─ common.less
│ ├─ desktop-header.less
│ ├─ file-manage.less
│ ├─ home-page.less
│ ├─ icon.less
│ ├─ layout.less
│ ├─ loading.less
│ ├─ markdown-styles.less
│ ├─ menu.less
│ ╰─ variables.less
├─ types // 类型定义
│ ├─ common.d.ts
│ ├─ custom.d.ts
│ ├─ file.d.ts
│ ╰─ webpack.d.ts
├─ utils // 工具函数
│ ├─ cli-progress.ts
│ ├─ common.ts
│ ├─ context-bridge.ts
│ ├─ desktop-utils.ts
│ ├─ fs.ts
│ ├─ ignore.ts
│ ├─ log.ts
│ ├─ md.ts
│ ├─ random.ts
│ ├─ svg-icons.ts
│ ╰─ time.ts
╰─ web // Web相关
├─ index.tsx
╰─ listen.ts