使用Electron+avalon+jquery+codemirror开发自己的IDE

浏览: 126 发布日期: 2016-12-03 分类: node.js

在纠结了一个月之后,发了无数帖子,我终于舍弃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. 环境搭建

  1. 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 //这条就是安装并运行了!
    
  2. 如果你要用到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了,很酷炫是不是!

返回顶部