Марко? Марко! # 3: Электрон, Webpack

Сегодня мы поговорим о том, почему нам пришлось отказаться от Lasso, чтобы использовать Electron с MarkoJS, и рассмотрим несколько примеров «красивого краткого синтаксиса» Марко.

На прошлой неделе мы говорили о том, как настроить Electron с помощью MarkoJS и Lasso. Однако проблема, с которой мы столкнулись, заключалась в невозможности использовать Electron в качестве пульта дистанционного управления в нашем рендерере. Оказывается, это проблема и с Webpack, и для этого нужно добавить правило target: electron-renderer в webpack.config.js.

Мы надеялись, что сможем достичь аналогичного результата в конфигурации для Lasso, но в конце концов мы решили перейти на Webpack и смогли настроить наш пульт в MarkoJS, чтобы мы могли работать с Electron. Но не раньше, чем мы должны были зайти в наш webpack.config.js и также установить псевдоним. Добавление этого правила к нашему объекту resolve было немного сложно понять, но, к счастью, MarkoJS имеет большую поддержку, и сами создатели MarkoJS показали нам, что нам нужно правило aliasFields: ["browser"].

Подобные псевдонимы и таргетинг позволяют нам загружать index.marko файл в наше окно браузера Electron следующим образом ...

app.on('ready', ()=> {
  topWindow = new BrowserWindow()
  topWindow.loadURL('file://' + __dirname + '/index.marko')
  topWindow.webContents.openDevTools();
  topWindow.on('closed', ()=> {
    topWindow = null
  })
})

При использовании MarkoJS у нас есть возможность использовать его Краткий синтаксис. Было приятно работать над этим проектом, и нам было весело рефакторинг нашего кода. Вот пример сетки 3x3 с использованием краткого синтаксиса.

class {
  distract(url, e) {
    e.preventDefault()
    mainProcess.createWindow(url)
  }
}
div.grid
  div.cell on-click('distract', some url) -- Wikipedia
  div.cell on-click('distract', some url) -- TED Talk
  div.cell on-click('distract', some url) -- Beat Maker
  div.cell on-click('distract', some url) -- Music Videos
  div.cell on-click('distract', some url) -- Throw Your Trash Away
  div.cell on-click('distract', some url) -- Hustlin'
  div.cell on-click('distract', some url) -- Pointer
  div.cell on-click('distract', some url) -- Gif
  div.cell on-click('distract', some url) -- Staggering Beauty

Здесь мы можем создавать новые окна в Electron с событием щелчка в нашем компоненте Marko. Мы делаем это, экспортируя функцию createWindow из нашего main.js файла Electron и импортируя ее как mainProcess.createWindow в наш компонент Marko, вот так…

static {
  const electron = require('electron')
  const remote = electron.remote
  const ipc = electron.ipcRenderer
  const mainProcess = remote.require('./main')
  const currentWindow = remote.getCurrentWindow()
}

Хорошо! Это касается нашего эксперимента с Electron и MarkoJS.

Вот ссылка на наше репо, если вы хотите увидеть больше нашего кода.

Напишите мне, если у вас есть какие-либо вопросы или вы хотите получить zip-файл нашего приложения Electron.