Problematische WebGL Unterstützung in Elektron

Question

Ich habe großes Problem mit webGL von webview in der Elektronen-Anwendung, die auf Mac OSX laufen. Ich brauche einige zusätzliche Abhängigkeiten wie ES6, React, LESS, also schließe ich grundsätzlich in die devDependencies neueste "electron-prebuilt-compile" -Version ein. Leider in diesem Fall Webview mit WebGL nicht ordnungsgemäß ausgeführt wird und elektron prompt mich solche Nachricht: Electron error message

Dann, wenn ich devDependency in "Elektron" ändern, funktioniert WebGL-Unterstützung ordnungsgemäß. Leider funktionieren EcmaScript-Methoden wie Import/Export und ganze React-Abhängigkeiten nicht. Ich habe versucht, diese Abhängigkeiten im Bereich "Abhängigkeiten" von Hand hinzuzufügen (babel, sass, react), aber es hat das Problem nicht gelöst.

Answer 1

Sie sollten Webpack verwenden, um Ihre React-App zu transponieren und loadURL zu verwenden, um das generierte Bundle zu lesen. Sie können sogar eine localhost-Adresse auf dem Elektron verwenden, um den react-hot-loader mit dem webpack-dev-Server zu verwenden (in dev mod).

wäre eine Probe webpack.config.js sein:

const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const ProgressBarPlugin = require('progress-bar-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 

const commomPlugins = [ 
    new HtmlWebpackPlugin({ 
    template: 'index.html' // this is your html file 
    }), 
    new ExtractTextPlugin('[name].bundle.css'), 
    new ProgressBarPlugin() 
] 

const devPlugins = [ 
    new webpack.HotModuleReplacementPlugin() 
] 

const optimizePlugins = [ 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['vendor'] 
    }) 
] 
// run optimizations only on production 
let plugins = commomPlugins 
switch (process.env.NODE_ENV) { 
    case 'production': 
    plugins = plugins.concat(optimizePlugins) 
    break 
    default: 
    plugins = plugins.concat(devPlugins) 
    break 
} 

module.exports = { 
    context: path.join(__dirname, 'src'), // react subfolder 
    entry: { 
    app: [ 
     'react-hot-loader/patch', 
     './index' 
    ], 
    vendor: ['react', 'react-dom'] 
    }, 
    output: { 
    path: path.join(__dirname, 'www'), // output code to www folder under src 
    filename: '[name].bundle.js', 
    chunkFilename: '[name].chunk.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /node_modules/, 
     use: [{ 
      loader: 'babel-loader' 
     }] 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader' 
     }) 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     use: 'file-loader?name=assets/[name].[hash].[ext]' 
     } 
    ] 
    }, 
    plugins, 
    externals: { 
    }, 
    devServer: { 
    hot: true 
    } 
} 

und die Elektronen Datei:

const {app, BrowserWindow} = require('electron') 
const path = require('path') 
const url = require('url') 

let toLoad = process.NODE_ENV === 'production' 
    ? url.format({ 
    pathname: path.join(__dirname, 'www', 'index.html'), 
    protocol: 'file:', 
    slashes: true 
    }) 
    : 'http://localhost:8080/' 

let win 

const createWindow =() => { 
    // Create the browser window. 
    win = new BrowserWindow({width: 800, height: 600}) 

    // and load the index.html of the app. 
    win.loadURL(toLoad) 

    if (process.NODE_ENV === 'development') { 
    win.webContents.openDevTools() 
    } 

    win.on('closed',() => { 
    win = null 
    }) 
} 
// ... 

Und schließlich Ihre package.json (für dev Sie getrennt exec sollte npm build-dev und npm electron-dev in Terminals, für die Produktion exec npm run build und npm run start nachher):

{ 
    "name": "hello", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build-dev": "NODE_ENV=development webpack-dev-server", 
    "electron-dev": "NODE_ENV=development electron .", 
    "build": "NODE_ENV=production webpack", 
    "start": "NODE_ENV=production electron .", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "electron": "^1.6.11", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "file-loader": "^0.11.2", 
    "html-webpack-plugin": "^2.29.0", 
    "progress-bar-webpack-plugin": "^1.10.0", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-hot-loader": "^3.0.0-beta.7", 
    "webpack": "^3.1.0" 
    }, 
    "devDependencies": { 
    "webpack-dev-server": "^2.5.1" 
    } 
} 

Hoffe, das hilft !!