使用Electron+avalon+jquery+codemirror开发自己的IDE
在纠结了一个月之后，发了无数帖子，我终于舍弃nw.js投入electron的怀抱，事实证明我是对的，electron居然有中文文档，还有官方示例，简直不要太爽！
1.electron基础知识
1.主渲染进程
让我们来看看electron的入门例子,
// 引入electron模块
const electron = require('electron');
// 控制应用的生命周期,给app绑定各种状态事件来控制生命周期
const app = electron.app;
// 控制原生浏览器窗口
const BrowserWindow = electron.BrowserWindow;
// path路径管理模块
const path = require('path');
// url管理模块
const url = require('url');
// 与渲染进程通信的ipc模块
const ipc = require('electron').ipcMain;
// 永久存放一个window对象的引用，不然会被对象垃圾回收而使应用关闭
let mainWindow;
// 生成一个浏览器窗口
function createWindow () {
// 使用new 一个BrowserWindow对象实例获取一个新的窗口，因为引用在外面不会被消除
mainWindow = new BrowserWindow({width: 1000, height: 750, resizable: true, frame:true});
// 内核还是网页，因此要打开网页
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// 启用开发者工具
// mainWindow.webContents.openDevTools()
// 给窗口关闭事件设置回调函数，使这个实例为空
mainWindow.on('closed', function () {
// 如果应用支持多窗口，应该将多个window对象放在一个数组中进行管理，与此同时，删除对应的元素
mainWindow = null;
});
// 渲染进程发送消息，我要求你关闭应用！
ipc.on('exitWindow',function () {
mainWindow.close();
});
}
// 给窗口准备设置回调，在创建了窗口后执行这个函数
app.on('ready', createWindow);
// 给全部窗口关闭时绑定回调，与上面不同，上面只销毁对应的窗口对象，这里会完全退出
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
// 给点击图标设置回调，开启一个新窗口
app.on('activate', function () {
if (mainWindow === null) {
createWindow();
}
});讲解：我开始也疑惑了很久主进程和渲染进程到底是个什么玩意？有什么关系？
我粗浅的理解：
主进程
main.js来代替,是程序的入口，他是跑在node上的东西，负责调用electron的相应模块，把你这个应用从html到桌面应用建立起来，比如里面的new BrowserWindow就是建立一个新窗口，但是真正这个界面什么样的，界面的各种div的点击事件，是不归他管的，但是这个应用的放大缩小，启动关闭，原生的菜单栏，打开文件窗口都是由他来管，渲染进程管不了，试想一下，要是网页内部可以随意控制这个应用的关闭打开，不是很危险？渲染进程
index.js来代替,其实就是网页引用的js文件，你可以粗浅的理解他跑在浏览器上，换了个名字而已，但是因为是桌面应用，基于浏览器的多线程，可以打开很多页面，这里也可以有很多渲染进程，而且index.js中可以使用node的模块，比如
fs.readdir('av......',(err,data)=>{
if(err){
alert('啊呀片没了');
}
});文件读错了能直接alert！这不是很爽！
相关api大家可以查阅
https://github.com/electron/e... 写的非常详尽！
基本知识有了，大家可以来搭建开发环境了。
2. 环境搭建
sf上的教程比较老了，现在没有
npm install electron-prebuilt了，直接npm install electron -g，并且在开发目录也进行安装即可,这里本地目录新手可以不要自己安装，使用官方的实例代码，然后就可以看到我之前给的main.js，大家可以把html改一改就可以建立自己的应用了，因为ide是个不怎么跳转的页面，很简单，所有这里面没啥技术含量，但是可以让大家快速上手electron的配置，我就来讲一讲。$ git clone https://github.com/electron/electron-quick-start //下载官方示例代码 $ cd electron-quick-start $ npm install && npm start //这条就是安装并运行了！
如果你要用到jquery，jq插件之类的看这里！！！！window.nodeRequire = require; delete window.require; delete window.exports; delete window.module;
在html的最前面用script引入这段代码，以后用nodeRequire来代替node的require，因为require，module等已经挂在window中，会和jquery冲突
在webpack中尽量使用import来引入模块而不是require，否则也会冲突，我至今没找到解决方案。。。。。。
var webpack = require("webpack");
var path = require("path");
var pathMap = require('./src/pathmap.json');
var srcDir = path.resolve(process.cwd(), 'src');
var nodeModPath = path.resolve(__dirname, './node_modules');
module.exports = {
entry: {
index:"./src/js/index.js"
},//入口js，可为数组
output: {
path: path.join(__dirname, "src/dist"),
filename: "[name]pack.js"
},
module: {
loaders: [
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
},
resolve: {
extensions: ['.js', "", ".css", ".scss"],//指明那些文件名是webpack要扫描到的
root: [srcDir, nodeModPath],
alias: pathMap,
publicPath: '/'
},
}webpack.config没什么稀奇的，就是配了avalon的路径和sass-loader注意如果你要使用scss也是sass-loader，尽量使用cnpm来解决node-sass的坑，webpack的配置我就不讲了
配置好了就可以愉快的开始开发了！其实还是传统的写网页而已，只不过可以加入node了，很酷炫是不是！