MMNote是我正在做的一款基于Electron平台的Markdown编辑器。我想让他基于时下最新的前端技术,TypeScript,Webpack,React,Redux等。我是Java出生,我发现现在前端搭建一个项目可不比搭建以后Java后端项目来得简单,或者实话说,更难。因为发展得太快,新设计,新库层出不穷,所以方案特别多,很可能现在的最优方案过一阵子就被人抛弃了,这是好事,也是坏事。比如Atom基于CoffeeScript构建,而CoffeeScript在风光几年后因为ES6的退出迅速没落,而还要称霸21世纪的Atom就尴尬了。

因为我也是初学前端客户端开发,所以想要渐进式的把所学融入到这个项目中,项目搭建也是,一开始会很简单(但我也花了好几周。。),为了快速上周,在开发过程中,我们再来一步步升级项目结构。

初始版本

2017年01月09日

虽然是初始版本,但是其实已经比较完善了。

  • electron 1.4.13
  • 语言:typescript 2.1.4,less 2.7.1
  • 打包:webpack 1.14.0
  • 视图框架:react 15.4.1
  • 编辑器:codemirror 5.21.0
  • css初始化:normalize.css 5.0.0

webpack需要的依赖:

  • loader:awesome-typescript-loader less-loader source-map-loader css-loader style-loader
  • 调试服务器:webpack-dev-server

我写了一个初始化的脚本文件,这样就算老是折腾也不怕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/sh
if [[ -d mmnote ]]; then
echo "mmnote folder alerdy existed."
exit
fi
mkdir mmnote
cd mmnote
npm init -y
npm install --save-dev webpack typescript awesome-typescript-loader less source-map-loader css-loader style-loader webpack-dev-server
npm install --save react react-dom @types/react @types/react-dom lodash electron normalize.css
npm install --save codemirror @types/codemirror react-split-pane @types/react-split-pane

目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── app
│   ├── index.html
│   ├── main.js
│   └── package.json
├── src
│   ├── component
│   │   ├── app.less
│   │   └── app.tsx
│   └── index.tsx
├── package.json
├── tsconfig.json
└── webpack.config.js

使用yeoman

2017年01月14日

一开始我还打算写个shell脚本来新建项目,这样以后再推翻迭代时建立项目会简单一些。后来我了解到了yeoman这个项目生成器工具,所以打算用yeoman来做一个生成“electron-typescript-react”的生成器。yeoman的教程可以看使用yeoman创建项目生成器 | 木杉的博客

// TODO

关于调试

调试开发分为两部分,一个是代码更新自动重启,一个是断点调试。

代码更新重启,这个会极大方便开发。使用webpack-dev-server可以自动刷新render代码。但是主线程的代码更新就无能为力了。

electron-connect这个项目支持restart和reload electron。restart就是当主进程代码变化时,重启electron。reload是当render代码变化时,让electron重新加载当前页面。

1
npm install electron-connect --save-dev

结合gulp使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
var gulp = require('gulp');
var electron = require('electron-connect').server.create();
gulp.task('serve', function () {
// Start browser process
electron.start();
// Restart browser process
gulp.watch('app.js', electron.restart);
// Reload renderer process
gulp.watch(['index.js', 'index.html'], electron.reload);
});

然后在electron代码中植入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
var client = require('electron-connect').client;
app.on('ready', function () {
var mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
// Connect to server process
client.create(mainWindow);
});

2017年01月20日 星期五 菜单

如果不给应用添加复制粘贴的菜单项目,electron中的调试控制台也是不能复制粘贴的。

使用原生webpack替代webpack-stream。因为后者在watch模式下有时候会出现没有更新代码的情况。

实现保存功能,然后我就发现我举步维艰了。React中,子控件如果有事件发生,可以使用onXX回调通知父控件。那如果父控件需要通知子控件做一些操作,要如何做??

通过props传入数据的确是可以更新子控件,但是如果是事件呢?比如我要通知Editor子控件保存当前文件,感觉不能用props来做。

// todo

gulp + webpack 构建多页面前端项目 - OPEN资讯
webpack&gulp集成简介 - 简书