使用Electron+avalon+jquery+codemirror開(kāi)發(fā)自己的IDE

jzzlee 發(fā)布于2019-08-22 10:46 / 1881人閱讀

摘要：入口，可為數(shù)組指明那些文件名是要掃描到的沒(méi)什么稀奇的，就是配了的路徑和注意如果你要使用也是，盡量使用來(lái)解決的坑，的配置我就不講了配置好了就可以愉快的開(kāi)始開(kāi)發(fā)了其實(shí)還是傳統(tǒng)的寫(xiě)網(wǎng)頁(yè)而已，只不過(guò)可以加入了，很酷炫是不是

在糾結(jié)了一個(gè)月之后，發(fā)了無(wú)數(shù)帖子，我終于舍棄nw.js投入electron的懷抱，事實(shí)證明我是對(duì)的，electron居然有中文文檔，還有官方示例，簡(jiǎn)直不要太爽！

1.electron基礎(chǔ)知識(shí)

1.主渲染進(jìn)程
讓我們來(lái)看看electron的入門例子,

//  引入electron模塊
const electron = require("electron"); 
//  控制應(yīng)用的生命周期,給app綁定各種狀態(tài)事件來(lái)控制生命周期
const app = electron.app; 
//  控制原生瀏覽器窗口
const BrowserWindow = electron.BrowserWindow; 
//  path路徑管理模塊
const path = require("path"); 
//  url管理模塊
const url = require("url"); 
//  與渲染進(jìn)程通信的ipc模塊
const ipc = require("electron").ipcMain;
//  永久存放一個(gè)window對(duì)象的引用，不然會(huì)被對(duì)象垃圾回收而使應(yīng)用關(guān)閉
let mainWindow; 

//  生成一個(gè)瀏覽器窗口
function createWindow () {
  //  使用new 一個(gè)BrowserWindow對(duì)象實(shí)例獲取一個(gè)新的窗口，因?yàn)橐迷谕饷娌粫?huì)被消除
  mainWindow = new BrowserWindow({width: 1000, height: 750, resizable: true, frame:true});

  //  內(nèi)核還是網(wǎng)頁(yè)，因此要打開(kāi)網(wǎng)頁(yè)
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: "file:",
    slashes: true
  })); 

  //   啟用開(kāi)發(fā)者工具
  //  mainWindow.webContents.openDevTools()

  //   給窗口關(guān)閉事件設(shè)置回調(diào)函數(shù)，使這個(gè)實(shí)例為空
  mainWindow.on("closed", function () {
    //  如果應(yīng)用支持多窗口，應(yīng)該將多個(gè)window對(duì)象放在一個(gè)數(shù)組中進(jìn)行管理，與此同時(shí)，刪除對(duì)應(yīng)的元素
    mainWindow = null; 
  });
   //    渲染進(jìn)程發(fā)送消息，我要求你關(guān)閉應(yīng)用！
  ipc.on("exitWindow",function () {
    mainWindow.close();
  });
}

//  給窗口準(zhǔn)備設(shè)置回調(diào)，在創(chuàng)建了窗口后執(zhí)行這個(gè)函數(shù)
app.on("ready", createWindow); 

//  給全部窗口關(guān)閉時(shí)綁定回調(diào)，與上面不同，上面只銷毀對(duì)應(yīng)的窗口對(duì)象，這里會(huì)完全退出
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") {
    app.quit(); 
  }
});


//  給點(diǎn)擊圖標(biāo)設(shè)置回調(diào)，開(kāi)啟一個(gè)新窗口
app.on("activate", function () {
  if (mainWindow === null) {
    createWindow(); 
  }
});

講解：我開(kāi)始也疑惑了很久主進(jìn)程和渲染進(jìn)程到底是個(gè)什么玩意？有什么關(guān)系？
我粗淺的理解：

主進(jìn)程 main.js來(lái)代替,是程序的入口，他是跑在node上的東西，負(fù)責(zé)調(diào)用electron的相應(yīng)模塊，把你這個(gè)應(yīng)用從html到桌面應(yīng)用建立起來(lái)，比如里面的new BrowserWindow就是建立一個(gè)新窗口，但是真正這個(gè)界面什么樣的，界面的各種div的點(diǎn)擊事件，是不歸他管的，但是這個(gè)應(yīng)用的放大縮小，啟動(dòng)關(guān)閉，原生的菜單欄，打開(kāi)文件窗口都是由他來(lái)管，渲染進(jìn)程管不了，試想一下，要是網(wǎng)頁(yè)內(nèi)部可以隨意控制這個(gè)應(yīng)用的關(guān)閉打開(kāi)，不是很危險(xiǎn)？

渲染進(jìn)程 index.js來(lái)代替,其實(shí)就是網(wǎng)頁(yè)引用的js文件，你可以粗淺的理解他跑在瀏覽器上，換了個(gè)名字而已，但是因?yàn)槭亲烂鎽?yīng)用，基于瀏覽器的多線程，可以打開(kāi)很多頁(yè)面，這里也可以有很多渲染進(jìn)程，而且index.js中可以使用node的模塊，比如

    fs.readdir("av......",(err,data)=>{
        if(err){
            alert("啊呀片沒(méi)了");
        }
    });

文件讀錯(cuò)了能直接alert！這不是很爽！
相關(guān)api大家可以查閱
https://github.com/electron/e... 寫(xiě)的非常詳盡！

基本知識(shí)有了，大家可以來(lái)搭建開(kāi)發(fā)環(huán)境了。

2. 環(huán)境搭建

sf上的教程比較老了，現(xiàn)在沒(méi)有npm install electron-prebuilt了，直接npm install electron -g，并且在開(kāi)發(fā)目錄也進(jìn)行安裝即可,這里本地目錄新手可以不要自己安裝，使用官方的實(shí)例代碼，然后就可以看到我之前給的main.js，大家可以把html改一改就可以建立自己的應(yīng)用了，因?yàn)閕de是個(gè)不怎么跳轉(zhuǎn)的頁(yè)面，很簡(jiǎn)單，所有這里面沒(méi)啥技術(shù)含量，但是可以讓大家快速上手electron的配置，我就來(lái)講一講。

$ git clone https://github.com/electron/electron-quick-start     //下載官方示例代碼
$ cd electron-quick-start
$ npm install && npm start //這條就是安裝并運(yùn)行了！

如果你要用到j(luò)query，jq插件之類的看這里！！！！

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

在html的最前面用script引入這段代碼，以后用nodeRequire來(lái)代替node的require，因?yàn)閞equire，module等已經(jīng)掛在window中，會(huì)和jquery沖突

在webpack中盡量使用import來(lái)引入模塊而不是require，否則也會(huì)沖突，我至今沒(méi)找到解決方案。。。。。。

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，可為數(shù)組
    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沒(méi)什么稀奇的，就是配了avalon的路徑和sass-loader注意如果你要使用scss也是sass-loader，盡量使用cnpm來(lái)解決node-sass的坑，webpack的配置我就不講了

配置好了就可以愉快的開(kāi)始開(kāi)發(fā)了！其實(shí)還是傳統(tǒng)的寫(xiě)網(wǎng)頁(yè)而已，只不過(guò)可以加入node了，很酷炫是不是！