Электронный проект
Вступление
Недавно мы, 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" }), }); }) }