Электронный проект

Вступление

Недавно мы, huiseoul, перешли с webpack на FuseBox. Скорость комплектации и HMR вполне порадовала. Это улучшило нашу продуктивность? Да! Я кратко расскажу, как настроить FuseBox с электронным проектом.

Перед FuseBox

До FuseBox мы использовали веб-пакет для объединения файлов. В среде разработки мы запустили webpack-dev-server, который следит за исходными файлами, а затем переупаковывает их. Итак, чтобы заставить работать livereload, наш html-файл был,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HMM - Huiseoul</title>
    <style media="screen">
      html, body, #root {
        height: 100%;
      }
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script>
      {
        if (process.env.NODE_ENV === 'development') {
          const script = document.createElement('script');
          script.src = '/webpack-dev-server.js';
          document.body.appendChild(script);
        }
      }
    </script>
    <script>
      {
        const script = document.createElement('script');
        const startingPath = process.env.NODE_ENV === 'development' ? '/' : './';
        script.src = `${startingPath}out/bundle.js`;
        document.body.appendChild(script);
      }
    </script>
  </body>
</html>

и мне пришлось запустить две команды в двух окнах терминала

$ yarn build:watch // to launch webpack-dev-server
$ yarn start:dev // to launch electron

Хотя это немного сложно. Это было не так уж и плохо, кроме скорости. Когда я вносил изменения в файл, webpack-dev-server улавливал их, переупаковывал, а затем перезагружал страницы рендерера. Это заняло около 10 секунд.

[at-loader] Ok, 1.225 sec.
Hash: d5de6ca0de6147fd45ad
Version: webpack 2.6.1
Time: 6708ms

С FuseBox

С FuseBox все немного иначе, но опыт разработки в целом сильно отличается от предыдущего. FuseBox имеет множество встроенных функций по умолчанию, которые более удобны для разработчиков и работают быстрее.

Вы помните index.html для процесса рендеринга выше? Чтобы заставить webpack-dev-server работать, нам пришлось добавить несколько тегов скрипта. Но с WebIndexPlugin FuseBox файл html теперь,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>$title</title>
  </head>
  <body>
    <div id="root" style="height: 100%;"></div>
    $bundles
  </body>
</html>

остальное будет обрабатывать FuseBox.

Несмотря на то, что в FuseBox есть множество приятных функций, скорость сборки - одна из лучших функций. Вы можете подумать о переходе с веб-пакета на FuseBox только из-за этого.

└── [email protected] 1.8 kB (0 files)
└── [email protected] 2.9 kB (0 files)
└── [email protected] 9.8 kB (0 files)
Size: 205.1 kB in 94ms

От ~ 10 секунд до ~ 100 мсек! Поскольку я недостаточно разбираюсь в webpack, возможно, есть возможности для улучшения. Но даже несмотря на то, что он есть, FuseBox обеспечивает примерно 10-кратную скорость, чем webpack.

Чем хорош FuseBox

простота

webpack имеет множество функций, и вы можете манипулировать им по своему усмотрению. По мере добавления дополнительных функций файл конфигурации веб-пакета обычно становится беспорядочным.

FuseBox имеет гораздо более простые конфигурации, но с достаточной гибкостью.

скорость

Это быстро. Это!

Чем хорош FuseBox

Поскольку это новички в блоке, есть несколько примеров.

Заключение

Ежедневно мир разработки программного обеспечения развивается. Становится все более важным внедрять новые инструменты, которые повышают вашу продуктивность, чтобы вы могли сосредоточиться на своих проблемах.

выше - целый fuse.js для нашего электронного проекта.

const {
  CSSPlugin,
  CSSResourcePlugin,
  EnvPlugin,
  FuseBox,
  TypeScriptHelpers,
  WebIndexPlugin,
} = require("fuse-box");
const { spawn } = require("child_process");
const NODE_ENV = process.env.NODE_ENV || "development";
const isProduction = NODE_ENV === "production";
const fuse = FuseBox.init({
  homeDir: "src/",
  output: "out/$name.js",
  plugins: [
    EnvPlugin({ NODE_ENV }),
    [CSSResourcePlugin(), CSSPlugin()],
    TypeScriptHelpers(),
    WebIndexPlugin({
      path: "./",
      template: "src/index.html",
      title: "Husieoul CRM",
    }),
  ]
});
if (!isProduction) { fuse.dev({port: 4445, httpServer: false}) }
const app = fuse.bundle("app")
  .target("electron")
  .instructions(`> [index.tsx]`);
if (!isProduction) { app.hmr().watch() }
if (isProduction) {
  fuse.run();
} else {
  fuse.run().then(() => {
    spawn("node", [`${ __dirname }/node_modules/electron/cli.js`,  __dirname ], {
      env: Object.assign(process.env, { NODE_ENV: "development" }),
    });
  })
}