使用Electron+avalon+jquery+codemirror開發自己的IDE

jzzlee 發布于2019-08-22 10:46 / 1880人閱讀

摘要：入口，可為數組指明那些文件名是要掃描到的沒什么稀奇的，就是配了的路徑和注意如果你要使用也是，盡量使用來解決的坑，的配置我就不講了配置好了就可以愉快的開始開發了其實還是傳統的寫網頁而已，只不過可以加入了，很酷炫是不是

在糾結了一個月之后，發了無數帖子，我終于舍棄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了，很酷炫是不是！

GPU云服務器云服務器 electron使用webrtc IDE使用使用WebRTC搭建自己的cdn 開發自己的小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91231.html

Javascript codemirror 高級應用

摘要：可能是在環境或者直接在瀏覽器的控制臺中進行調試。阮老師的代碼傳送門在此這個代碼的演示程序，如下圖所示本系統的特點系統采用進行開發的。搭建javascript在線IDE 項目地址 github:https://github.com/sixtrees/j... 這兩天在看阮一峰的《ES6標準入門》，對其中涉及到的代碼示例部分，感覺到很不方便，不知道阮老師是如何進行代碼調試的。可能是在no...

DesGemini 2019-08-23 11:28 評論0 收藏0
如何使用前端技術開發一個桌面跨端應用

摘要：使用實現桌面應用實現離線可用很多方法，比如使用技術。還有一個好處，因為它完全基于來實現可以使用的一些新功能，那我們理論上可以在做桌面應用時順手把應用也做了。本文將會講述一個完整的跨端桌面應用?代碼畫板?的構建，會涉及到整個軟件開發流程，從開始的設計、編碼、到最后產品成型、包裝等。本文不僅僅是一篇技術方面的專業文章，更會有很多產品方面的設計思想和將技術轉換成生產力的思考，我將結合我自...

shixinzhang 2019-08-23 15:53 評論0 收藏0
前端JSer裝逼手冊(轉)

摘要：在裝逼成本越來越高的圈，是時候充值一下了題記開發是標配，美其名曰提高開發體驗什么你還在用趕緊給我換編輯器，三選一雖然很想用，但一定要忍住，并且與人解釋道啟動速度慢，消耗資源多，不適合我這種完美主義者如果不是為了美觀，我寧愿使用命令行二逼在裝逼成本越來越高的 JS 圈，是時候充值一下了 ———— 題記 § 開發 Macbook Pro 是標配，美其名曰提高開發體驗什么？你還在用 S...

xiaowugui666 2019-08-21 14:16 評論0 收藏0
前端 JSer 裝逼手冊

摘要：在裝逼成本越來越高的圈，是時候充值一下了題記開發是標配，美其名曰提高開發體驗什么你還在用趕緊給我換編輯器，三選一雖然很想用，但一定要忍住，并且與人解釋道啟動速度慢，消耗資源多，不適合我這種完美主義者如果不是為了美觀，我寧愿使用命令行二逼在裝逼成本越來越高的JS圈，是時候充值一下了 ——題記 § 開發 Macbook Pro是標配，美其名曰提高開發體驗什么？你還在用Spotligh...

vincent_xyb 2019-08-21 14:03 評論0 收藏0
手把手教你搭建網頁代碼編輯器

摘要：如下，我們創建一個編輯代碼的編輯器上邊的代碼復制到文件即可運行。完整的拓展列表在這里如下示例展示了開啟語法糾錯直接將代碼復制到文件即可運行當然，的功能十分豐富，比如按鍵映射主題定制模式等，更深入的使用可以查閱官網。 CodeMirror CodeMirror 是一個可以鑲嵌到 Web 頁面中代碼編輯器組件。它的核心代碼庫僅僅提供了編輯器功能，沒有提供像是自動補全, 語法糾錯等IDE...

ranwu 2019-08-02 16:04 評論0 收藏0