如何使用Electron运行和打包外部可执行文件?

时间:2018-02-27 08:02:24

标签: node.js electron electron-builder electron-packager

例如,我有一个编译的二进制文件cudaDeviceQuery,它返回一个设备列表作为JSON。这是一段代码:

export default function cudaDeviceQuery(): Promise<CollectorResponse> {
  const throwError = () => {
    throw new Error("Unfortunately your platform isn't yet unsupported");
  };

  const file = __DARWIN__
    ? path.join(__dirname, 'darwin', 'cudaDeviceQuery')
    : __WIN32__
      ? path.join(__dirname, 'win', 'cudaDeviceQuery.exe')
      : throwError();

  const descriptor = spawn(file);

  return new Promise((resolve, reject) => {
    let outerData = '';
    descriptor.stdout.on('data', data => {
      outerData += data;
    });

    descriptor.on('close', () => {
      try {
        resolve(JSON.parse(outerData));
      } catch (e) {
        reject(e);
      }
    });
  });
}

但是当我在渲染器进程__dirname中使用此函数时/spawn /darwin/cudaDeviceQuery ENOENT,因此出现webpack.config.base.js错误。在dev环境中生成它并将其打包生产的正确方法是什么?

webpack配置:

/** * Base webpack config used across other specific configs */ const webpack = require('webpack'); const path = require('path'); const getReplacements = require('./app/app-info').getReplacements; const { dependencies: externals } = require('./app/renderer/package.json'); module.exports = { module: { noParse: [path.join(__dirname, 'node_modules/ws')], rules: [ { test: /\.tsx?$/, use: [ { loader: 'babel-loader', }, { loader: 'ts-loader', }, ], exclude: /node_modules/, }, ], }, output: { path: path.join(__dirname, 'app', 'renderer'), filename: 'bundle.js', libraryTarget: 'commonjs2', }, // https://webpack.github.io/docs/configuration.html#resolve resolve: { extensions: ['.js', '.ts', '.tsx', 'json'], modules: [path.join(__dirname, 'app', 'renderer'), 'node_modules'], }, plugins: [new webpack.DefinePlugin(getReplacements())], externals: [...Object.keys(externals || {}), 'ws'], };

webpack.config.development.js

/** * Build config for development process that uses Hot-Module-Replacement * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html */ const webpack = require('webpack'); const merge = require('webpack-merge'); const baseConfig = require('./webpack.config.base'); const getReplacements = require('./app/app-info').getReplacements; const port = process.env.PORT || 3000; module.exports = merge(baseConfig, { devtool: 'inline-source-map', entry: [ 'react-hot-loader/patch', `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr&reload=true`, './app/renderer/index', ], output: { publicPath: `http://localhost:${port}/dist/`, }, module: { rules: [ // Css, SCSS, woff loaders are here ], }, plugins: [ // https://webpack.github.io/docs/hot-module-replacement-with-webpack.html new webpack.HotModuleReplacementPlugin(), new webpack.LoaderOptionsPlugin({ debug: true, }), ], // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works target: 'electron-renderer', });

webpack.config.electron.js

/** * Build config for electron 'Main Process' file */ const webpack = require('webpack'); const merge = require('webpack-merge'); const baseConfig = require('./webpack.config.base'); const getReplacements = require('./app/app-info').getReplacements; module.exports = merge(baseConfig, { devtool: 'source-map', entry: ['./app/main/index.ts'], // 'main.js' in root output: { path: __dirname, filename: './app/main/main.js', }, plugins: [ // Add source map support for stack traces in node // https://github.com/evanw/node-source-map-support // new webpack.BannerPlugin( // 'require("source-map-support").install();', // { raw: true, entryOnly: false } // ), ], /** * Set target to Electron specific node.js env. * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works */ target: 'electron-main', /** * Disables webpack processing of __dirname and __filename. * If you run the bundle in node.js it falls back to these values of node.js. * https://github.com/webpack/webpack/issues/2010 */ node: { __dirname: false, __filename: false }, });

server.js

如您所见,我正在使用dev服务器进行热模块替换,所以也许这就是原因...我有server.js创建带脚本的服务器然后我在主进程中使用它。这是/** * Setup and run the development server for Hot-Module-Replacement * https://webpack.github.io/docs/hot-module-replacement-with-webpack.html */ const argv = require('minimist')(process.argv.slice(2)); const { spawn } = require('child_process'); async function createMiddleware(port, configPath) { const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackHotMiddleware = require('webpack-hot-middleware'); const config = require(configPath); const app = express(); const compiler = webpack(config); const PORT = process.env.PORT || port; const wdm = webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, stats: { colors: true, }, }); app.use(wdm); app.use(webpackHotMiddleware(compiler)); const server = app.listen(PORT, serverError => { if (serverError) { return console.error(serverError); } console.log(`Listening at http://localhost:${PORT}`); }); process.on('SIGTERM', () => { console.log('Stopping dev server'); wdm.close(); server.close(() => { process.exit(0); }); }); } createMiddleware(3000, './webpack.config.development'); // A main renderer process createMiddleware(3010, './webpack.config.server'); // A backend for communicating between renderer and remote server if (argv['start-hot']) { spawn('npm', ['run', 'start-hot'], { shell: true, env: process.env, stdio: 'inherit', }) .on('close', code => process.exit(code)) .on('error', spawnError => console.error(spawnError)); }

cudaDeviceQuery

换句话说,我需要从电子渲染器进程调用electron-builder库。我正在使用Github/repo.html,但没关系,我可以切换到另一个构建器。

2 个答案:

答案 0 :(得分:2)

有两件事。如果您在网络应用配置中设置disappeared,您将从上下文目录中获取该文件的__dirname: true路径

如果您设置relative,那么__dirname: false将拥有完整路径。

开发模式

您有两个选择

  1. 设置__dirname并将其与__dirname: true
  2. 连接
  3. 设置os.cwd()并直接使用__dirname: false
  4. 生产模式

    1. 设置__dirname并使用__dirname: true
    2. 设置os.cwd()并使用__dirname: true
    3. 我更喜欢2作为生产中的首选方法

答案 1 :(得分:0)

package.json中添加它:

"scripts": {
    "start": "electron .", "install": "electron-rebuild",
    "package-osx": "electron-packager . Node-RED --platform=darwin --arch=x64 --   out=build --overwrite",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --prune=true --out=release-builds",
    "package-win": "electron-packager . electron-serialport --overwrite --asar=true --platform=win32 --arch=x64 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"CryptoApp\"",
    "package-linux": "electron-packager . electron-serialport --overwrite --asar=true --platform=linux --arch=x64 --prune=true --out=release-builds"
},

"dependencies": {
    "electron-packager": "^12.1.0",
    "electron-prebuilt": "^1.4.13",
}

如果不适用于Windows,请使用以下命令:

"package-win": "electron-packager . electron-serialport --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"CryptoApp\"",

谢谢...