Question

在mac osx上运行的电子应用程序中使用webview的webGL有很大问题。我需要一些额外的依赖，比如ES6，React，LESS，所以我基本上包含在最新的devDependencies＆＃34; electron-prebuilt-compile＆＃34;版。不幸的是，在那种情况下webview与webGL没有正常运行，电子提示我这样的消息： Electron error message

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

然后，如果我将devDependency更改为＆＃34;电子＆＃34;，webGL支持正常工作。不幸的是，像导入/导出和整个React依赖的EcmaScript方法都不起作用。我试图在＆＃34;依赖关系＆＃34;中手动添加这些依赖项。部分（巴贝尔，萨斯，反应），但它没有解决问题。

Answer 1

您应该使用webpack来转换您的React应用程序并使用loadURL来读取生成的包。你甚至可以在电子上使用localhost地址来使用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（对于开发人员，你应该在单独的终端中执行npm build-dev和npm electron-dev，对于生产执行npm 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"
  }
}

希望这会有所帮助!!

电子中有问题的webGL支持

1 个答案: