Support webGL problématique en électron

Question

J'ai un gros problème avec l'utilisation de webGL par webview dans l'application électronique qui s'exécute sur mac osx. J'ai besoin de dépendances supplémentaires comme ES6, React, MOINS, donc j'inclus dans la version la plus récente "electron-prebuilt-compile" de devDependencies. Malheureusement dans ce cas webview avec webGL ne fonctionne pas correctement et l'électron me demande un tel message: Electron error message

Ensuite, si je change devDependency en "electron", le support webGL fonctionne correctement. Malheureusement, les méthodes EcmaScript telles que l'importation/exportation et les dépendances React entières ne fonctionnent pas. J'ai essayé d'ajouter ces dépendances à la main dans la section "dépendances" (babel, sass, reagir) mais cela n'a pas résolu le problème.

Answer 1

Vous devez utiliser webpack pour transmettre votre application React et utiliser loadURL pour lire l'ensemble généré. Vous pouvez même utiliser une adresse localhost sur electron pour utiliser reac-hot-loader avec le serveur webpack-dev (en mod mod).

Un échantillon webpack.config.js seraient:

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 
    } 
} 

et le fichier électronique:

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 
    }) 
} 
// ... 

Et enfin votre package.json (pour dev vous devez exec npm build-dev et npm electron-dev séparés en terminaux, pour l'exécution de production npm run build et npm run start après):

{ 
    "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" 
    } 
} 

Espérons que cela aide !!