\u63a5\u4e0b\u6765\uff0c\u5728main.js\u6587\u4ef6\u4e2d\u8fdb\u884c\u914d\u7f6e\uff1a<\/p>\n
“`<\/p>\n
const { app, BrowserWindow } = require(‘electron’);<\/p>\n
const path = require(‘path’);<\/p>\n
H5\u662f\u4e00\u79cd\u57fa\u4e8eHTML5\u6280\u672f\u7684\u7f51\u9875\u5f00\u53d1\u8bed\u8a00\uff0c\u5b83\u5728\u79fb\u52a8\u7aef\u7684\u5e94\u7528\u8d8a\u6765\u8d8a\u5e7f\u6cdb\uff0c\u4f46\u662f\u5728\u4e00\u4e9b\u7279\u5b9a\u573a\u5408\u4e2d\uff0c\u6211\u4eec\u53ef\u80fd\u9700\u8981\u5c06H5\u9879\u76ee\u6253\u5305\u6210EXE\u53ef\u6267\u884c\u6587\u4ef6\uff0c\u4ee5\u65b9\u4fbf\u7528\u6237\u79bb\u7ebf\u4f7f\u7528\u6216\u8005\u8fdb\u884c\u63a8\u5e7f\u3002\u4e0b\u9762\u5c06\u5bf9H5\u96c6\u6210EXE\u7684\u539f\u7406\u548c\u8be6\u7ec6\u4ecb\u7ecd\u8fdb\u884c\u9610\u8ff0\u3002<\/p>\n
\u4e00\u3001\u539f\u7406<\/p>\n
\u5c06H5\u9879\u76ee\u6253\u5305\u6210EXE\u53ef\u6267\u884c\u6587\u4ef6\u7684\u539f\u7406\uff0c\u5176\u5b9e\u5c31\u662f\u5c06H5\u9879\u76ee\u6253\u5305\u6210\u4e00\u4e2a\u5e26\u6709\u6d4f\u89c8\u5668\u5185\u6838\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u53cc\u51fb\u5e94\u7528\u7a0b\u5e8f\u6253\u5f00\uff0c\u5c31\u50cf\u6253\u5f00\u4e00\u4e2a\u666e\u901a\u7684\u8f6f\u4ef6\u4e00\u6837\u3002\u8fd9\u6837\uff0c\u7528\u6237\u5c31\u53ef\u4ee5\u5728\u6ca1\u6709\u7f51\u7edc\u8fde\u63a5\u7684\u60c5\u51b5\u4e0b\uff0c\u79bb\u7ebf\u4f7f\u7528H5\u9879\u76ee\u3002<\/p>\n
\u5177\u4f53\u6765\u8bf4\uff0c\u6253\u5305H5\u9879\u76ee\u6210EXE\u53ef\u6267\u884c\u6587\u4ef6\u7684\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n
1. \u5c06H5\u9879\u76ee\u4e2d\u7684HTML\u3001CSS\u3001JS\u7b49\u6587\u4ef6\u6253\u5305\u6210\u4e00\u4e2a\u79bb\u7ebf\u5305\u3002<\/p>\n
2. \u4f7f\u7528\u6d4f\u89c8\u5668\u5185\u6838\u5d4c\u5165\u5de5\u5177\uff0c\u5c06\u79bb\u7ebf\u5305\u5d4c\u5165\u5230EXE\u53ef\u6267\u884c\u6587\u4ef6\u4e2d\u3002<\/p>\n
3. \u7f16\u5199\u4e00\u4e2a\u542f\u52a8\u7a0b\u5e8f\uff0c\u542f\u52a8\u7a0b\u5e8f\u4f1a\u8c03\u7528\u6d4f\u89c8\u5668\u5185\u6838\u6253\u5f00\u79bb\u7ebf\u5305\u3002<\/p>\n
4. \u6253\u5305\u6210EXE\u53ef\u6267\u884c\u6587\u4ef6\u3002<\/p>\n
\u4e8c\u3001\u8be6\u7ec6\u4ecb\u7ecd<\/p>\n
1. \u6253\u5305\u79bb\u7ebf\u5305<\/p>\n
\u5c06H5\u9879\u76ee\u6253\u5305\u6210\u79bb\u7ebf\u5305\uff0c\u9700\u8981\u4f7f\u7528\u4e00\u4e9b\u5de5\u5177\u6765\u8fdb\u884c\u6253\u5305\u3002\u76ee\u524d\u6bd4\u8f83\u5e38\u7528\u7684\u6253\u5305\u5de5\u5177\u6709grunt\u3001gulp\u3001webpack\u7b49\u3002\u8fd9\u91cc\u4ee5webpack\u4e3a\u4f8b\uff0c\u4ecb\u7ecd\u5982\u4f55\u6253\u5305\u79bb\u7ebf\u5305\u3002<\/p>\n
\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5webpack\u548c\u76f8\u5173\u7684\u63d2\u4ef6\uff1a<\/p>\n
“`<\/p>\n
npm install webpack –save-dev<\/p>\n
npm install html-webpack-plugin –save-dev<\/p>\n
npm install extract-text-webpack-plugin –save-dev<\/p>\n
“`<\/p>\n
\u7136\u540e\uff0c\u5728webpack.config.js\u6587\u4ef6\u4e2d\u8fdb\u884c\u914d\u7f6e\uff1a<\/p>\n
“`<\/p>\n
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);<\/p>\n
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);<\/p>\n
module.exports = {<\/p>\n
entry: ‘.\/src\/index.js’,<\/p>\n
output: {<\/p>\n
path: __dirname + ‘\/dist’,<\/p>\n
filename: ‘index_bundle.js’<\/p>\n
},<\/p>\n
module: {<\/p>\n
rules: [<\/p>\n
{<\/p>\n
test: \/\\.css$\/,<\/p>\n
use: ExtractTextPlugin.extract({<\/p>\n
fallback: ‘style-loader’,<\/p>\n
use: ‘css-loader’<\/p>\n
})<\/p>\n
},<\/p>\n
{<\/p>\n
test: \/\\.(png|svg|jpg|gif)$\/,<\/p>\n
use: [‘file-loader’]<\/p>\n
}<\/p>\n
]<\/p>\n
},<\/p>\n
plugins: [<\/p>\n
new HtmlWebpackPlugin({<\/p>\n
template: ‘.\/src\/index.html’<\/p>\n
}),<\/p>\n
new ExtractTextPlugin(‘styles.css’)<\/p>\n
]<\/p>\n
};<\/p>\n
“`<\/p>\n
\u4e0a\u9762\u7684\u914d\u7f6e\u6587\u4ef6\u4e2d\uff0centry\u6307\u5b9a\u5165\u53e3\u6587\u4ef6\uff0coutput\u6307\u5b9a\u8f93\u51fa\u6587\u4ef6\uff0cmodule.rules\u6307\u5b9a\u6253\u5305\u89c4\u5219\uff0cplugins\u6307\u5b9a\u63d2\u4ef6\u3002\u8fd9\u91cc\u4f7f\u7528\u4e86HtmlWebpackPlugin\u63d2\u4ef6\u548cExtractTextPlugin\u63d2\u4ef6\uff0c\u5206\u522b\u7528\u4e8e\u6253\u5305HTML\u548cCSS\u6587\u4ef6\u3002<\/p>\n
\u63a5\u4e0b\u6765\uff0c\u5728\u547d\u4ee4\u884c\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u8fdb\u884c\u6253\u5305\uff1a<\/p>\n
“`<\/p>\n
webpack –config webpack.config.js<\/p>\n
“`<\/p>\n
\u6253\u5305\u5b8c\u6210\u540e\uff0c\u4f1a\u5728dist\u76ee\u5f55\u4e0b\u751f\u6210index_bundle.js\u548cstyles.css\u6587\u4ef6\uff0c\u8fd9\u4e9b\u6587\u4ef6\u5c31\u662f\u6253\u5305\u540e\u7684\u79bb\u7ebf\u5305\u3002<\/p>\n
2. \u5d4c\u5165\u6d4f\u89c8\u5668\u5185\u6838<\/p>\n
\u5c06\u79bb\u7ebf\u5305\u5d4c\u5165\u5230EXE\u53ef\u6267\u884c\u6587\u4ef6\u4e2d\uff0c\u9700\u8981\u4f7f\u7528\u4e00\u4e9b\u5de5\u5177\u6765\u8fdb\u884c\u5d4c\u5165\u3002\u76ee\u524d\u6bd4\u8f83\u5e38\u7528\u7684\u5de5\u5177\u6709Electron\u3001NW.js\u7b49\u3002\u8fd9\u91cc\u4ee5Electron\u4e3a\u4f8b\uff0c\u4ecb\u7ecd\u5982\u4f55\u5d4c\u5165\u79bb\u7ebf\u5305\u3002<\/p>\n
\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5Electron\uff1a<\/p>\n
“`<\/p>\n
npm install electron –save-dev<\/p>\n
“`<\/p>\n
\u7136\u540e\uff0c\u5728package.json\u6587\u4ef6\u4e2d\u8fdb\u884c\u914d\u7f6e\uff1a<\/p>\n
“`<\/p>\n
{<\/p>\n
“name”: “h5-to-exe”,<\/p>\n
“version”: “1.0.0”,<\/p>\n
“main”: “main.js”,<\/p>\n
“dependencies”: {<\/p>\n
“electron”: “^4.0.4”<\/p>\n
}<\/p>\n
}<\/p>\n
“`<\/p>\n
\u5176\u4e2d\uff0cname\u6307\u5b9a\u5e94\u7528\u7a0b\u5e8f\u7684\u540d\u5b57\uff0cmain\u6307\u5b9a\u4e3b\u7a0b\u5e8f\u6587\u4ef6\uff0cdeppowerbuilder2021\u751f\u6210exe<\/a>endencies\u6307\u5b9a\u4f9d\u8d56\u7684Electron\u7248\u672c\u3002<\/p>\n \u63a5\u4e0b\u6765\uff0c\u5728main.js\u6587\u4ef6\u4e2d\u8fdb\u884c\u914d\u7f6e\uff1a<\/p>\n “`<\/p>\n const { app, BrowserWindow } = require(‘electron’);<\/p>\n const path = require(‘path’);<\/p>\n
![](\"https:\/\/i.cdn.yimenapp.com\/2023-03\/16\/14\/31828969222.jpg\")
<\/figure>\n<\/p>\n