To package HTML, JS, CSS, etc. files into a single executable program file, tools such as Electron can be used.
Electron is a framework for building desktop applications using Node.js and Chromium, which allows you to use web technologies (HTML, JS, CSS, etc.) to build cross-platform desktop applications. Electron can package your web application into a single executable file and supports multiple platforms such as Windows, macOS and Linux.
Here are the steps to package a simple web application with Electron:
1. Install Electron in your project: npm install electron --save-dev
2. Create a main.js file in which to write the main logic of the Electron application. For example:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
preload: __dirname + '/preload.js'
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
3. Create a package.json file in your project root directory, and specify your application name, version number, description, entry file and other information in it. For example:
{
"name": "my-app",
"version": "1.0.0",
"description": "My Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "Your Name",
"license": "MIT"
}
4. Run npm start on the command line to start your Electron application.
5. Use tools such as electron-builder to package your Electron application into an executable file. For example, running npx electron-builder --win on the command line will package your application into a Windows executable.
In this way, you can package HTML, JS, CSS and other files into a single executable program file.