使用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. 環境搭建

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了，很酷炫是否是！