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

jzzlee 发布于2019-08-22 10:46 / 1871人阅读

摘要：入口，可为数组指明那些文件名是要扫描到的没什么稀奇的，就是配了的路径和注意如果你要使用也是，尽量使用来解决的坑，的配置我就不讲了配置好了就可以愉快的开始开发了其实还是传统的写网页而已，只不过可以加入了，很酷炫是不是

在纠结了一个月之后，发了无数帖子，我终于舍弃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 开发自己的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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