电子中有问题的webGL支持

Question

我在Mac osx上运行的电子应用程序中使用webGL by webview有很大的问题。 我需要一些额外的依赖项，如ES6，React，LESS，所以我基本上包含在devDependencies中最新的"电子预构建编译"版本。不幸的是，在这种情况下，带有webGL的webview无法正常运行，并且电子提示我这样的消息： 电子错误信息

在此页面上运行 Unity 内容时出错。有关详细信息，请参阅浏览器的 JavaScript 控制台。错误是：未捕获的语法错误：意外的标识符

然后，如果我将devDependency 更改为"electron"，webGL 支持将正常工作。不幸的是，像导入/导出和整个 React 依赖项这样的 EcmaScript 方法不起作用。我试图在"依赖"部分(babel、sass、react)中手动添加这些依赖项，但它并没有解决问题。

Answer 1

你应该使用 webpack 来转译你的 React 应用程序，并使用 loadURL 来读取生成的捆绑包。你甚至可以在 electron 上使用本地主机地址来使用 react-hot-loader 和 webpack-dev 服务器(在 dev mod 中)。

一个示例 webpack.config.js 将是：

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

和电子文件：

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

最后是你的package.json(对于dev，你应该在单独的终端中执行npm build-dev和npm electron-dev，对于生产execnpm run build和之后的npm run start)：

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

希望这有帮助！！