01.创建react和electron工程
创建一个文件夹file-tree-js，进入文件夹，打开终端，输入yarn init -y创建一个javascript项目，这里使用了yarn作为包管理工具，也可以使用nodejs默认安装时自带的npm来创建javascript项目。
输入yarn add react react-dom和yarn add electron -D，安装react和electron，-D表示作为开发依赖安装，开发依赖并不会打包到最终的生产环境中。这里还需要一个打包工具用于将写好的javascript模块进行打包。常见的打包工具有webpack，parcel，rollup等等，这里我使用parcel。
输入yarn add parcel -D安装parcel，同样，parcel作为开发依赖安装到项目中。
创建public和src文件夹，public文件夹用于存放静态资源，src存放js工程的源码。在public文件夹下创建一个index.html，内容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/index.jsx"></script>
</body>
</html>
在src文件夹下创建一个index.jsx文件，该文件是该工程的入口文件，内容如下：
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return <div>hello world</div>;
}
ReactDOM.render(<App />, document.getElementById('root'));
修改package.json文件，内容如下：
{
"name": "file-tree-js",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module",
"devDependencies": {
"parcel": "^2.0.0",
"electron": "15.3.1"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {
"build": "parcel public/index.html"
}
}
然后，在终端中输入yarn build，这条命令对应package.json中scripts下的build语句，可以看到其实是使用了刚刚安装的打包工具对代码进行的打包。
如果一切都没有问题，终端会显示这样一条语句，Server running at http://localhost:1234，此时打开浏览器，在地址栏中输入http://localhost:1234，即可访问代码正在运行的页面，可以看到hello world，如下图所示。
02.实现打开文件夹的功能
在src目录下创建一个main.js文件，该文件用于保存electron部分的代码，如下所示：
const { app, BrowserWindow } = require("electron");
app.on("ready", function () {
let mainWindow = new BrowserWindow({
width: 1440,
height: 900,
minHeight: 270,
minWidth: 400,
show: false,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
},
});
mainWindow.loadURL("http://localhost:1234");
if (!app.isPackaged) {
mainWindow.webContents.openDevTools();
}
mainWindow.once("ready-to-show", () => {
mainWindow.show();
});
});
app.on("window-all-closed", function () {
app.quit();
});
在终端中输入 electron .，可以看到弹出一个窗口，显示的内容为hello world。
然后我们需要创建一个菜单，这个菜单里面有一个菜单项，用于打开文件夹：
const template= [
{
label: '打开工程',
click: (menuItem, browserWindow) => {
// let structure = {};
const dirPath = dialog.showOpenDialogSync(browserWindow, {
properties: ['openDirectory'],
});
if (dirPath) {
browserWindow.webContents.send('openFolder', dirPath[0]);
}
},
},
];
let menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
再次运行electron .可以看到窗口的菜单栏中有一个菜单。
点击该菜单，electron打开一个窗口，用于选择文件夹，点击确定后，electron进程会从主进程发送一条信息到渲染进程，渲染进程接收到主进程发来的信息后，便可着手准备之后的工作了。
03.实现mount前区分是文件夹还是文件
我们的组件需要知道它自己代表的是文件夹还是文件，这个动作需要在它被渲染到页面上之前就完成，所以我通过if else语句来判别组件是文件夹组件还是文件组件，如果是文件夹组件，该组件就有许多个子组件，子组件中又包括了文件夹组件和文件组件，并且点击该组件时还要渲染它的子组件；如果是文件组件，那么该组件只需要关心其本身就可以了。
我们可以通过nodejs的fs模块实现读取路径，并判断该路径是文件夹还是文件：
const fs = require(‘fs’);
let stats = fs.statsSync(dir);
If(stats.isDirectory()) {
} else if(stats.isFile()) {
}
这样就可以辨别是文件组件还是文件夹组件，并通过不同的节点渲染到页面上：
const TreeItem = ({ filePath }: { filePath: string }) => {
let fileStat = fs.statSync(filePath);
let isFolder = fileStat.isDirectory();
let isOpen = useRef<boolean>(false);
let folderDiv = useRef<HTMLDivElement>(null);
const [children, setChildren] = useState([]);
const [selected, setSelected] = useState<boolean>(false);
const itemRef = useRef<HTMLDivElement>(null);
if (isFolder) {
return (
<>
<div
title={filePath}
style={{ background: selected && '#6ab2fb' }}
ref={folderDiv}
className="folder tree-item"
onClick={(e) => {
e.stopPropagation();
if (!e.ctrlKey) {
mainStore.selection.forEach((func, k) => {
func(false);
});
mainStore.selection.clear();
if (isOpen.current) {
isOpen.current = false;
folderDiv.current.classList.remove('open');
} else {
let files = fs.readdirSync(filePath).filter((item) => {
let stat = fs.statSync(path.join(filePath, item));
return path.extname(item) === '.c' || stat.isDirectory();
});
setChildren(files);
isOpen.current = true;
folderDiv.current.classList.add('open');
}
}
if (!selected) {
setSelected(true);
mainStore.selection.set(filePath, setSelected);
} else {
setSelected(false);
mainStore.selection.delete(filePath);
}
}}>
{path.basename(filePath)}
</div>
<ul>
{children.length !== 0 &&
children.map((child) => {
let childPath = path.join(filePath, child);
return (
<li key={childPath}>
<TreeItem filePath={childPath} />
</li>
);
})}
</ul>
</>
);
} else {
return (
<div
className="tree-item"
ref={itemRef}
style={{ background: selected && '#6ab2fb' }}
data-extension={path.extname(filePath)}
title={filePath}
onClick={(e) => {
codeFileStore.setCurrentSelectedFile(filePath);
if (!e.ctrlKey) {
mainStore.selection.forEach((func, k) => {
func(false);
});
mainStore.selection.clear();
}
if (!selected) {
setSelected(true);
mainStore.selection.set(filePath, setSelected);
} else {
setSelected(false);
mainStore.selection.delete(filePath);
}
}}>
{path.basename(filePath)}
</div>
);
}
};
网友评论