Elektron mit Reagieren und Webpack

Question

Ich versuche, eine einfache Elektronenapp mit Webpack zu laufen und zu reagieren.

Also habe ich meine webpack mit target: "electron"

const webpack = require('webpack'); 
const path = require('path'); 
const SassLintPlugin = require('sasslint-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const extractSass = new ExtractTextPlugin({ 
    filename: '[name].css', 
    disable: process.env.NODE_ENV === 'development', 
}); 

module.exports = { 
    target: 'electron', 
    context: path.resolve(__dirname), 
    entry: { 
    app: './assets/js/components/index', 
    main: './main', 
    }, 
    output: { 
    publicPath: '/dist/', 
    path: path.resolve('./dist/'), 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'eslint-loader', 
     include: path.resolve(__dirname, './assets/js/'), 
     exclude: /node_modules/, 
     enforce: 'pre', 
     }, 
     { 
     test: /\.jsx?$/, 
     include: path.resolve(__dirname, './assets/js/'), 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     }, 
     { 
     test: /\.scss$/, 
     include: path.resolve(__dirname, './assets/scss/'), 
     loader: extractSass.extract({ 
      use: [ 
      { loader: 'css-loader' }, 
      { loader: 'sass-loader' }, 
      ], 
      // use style-loader in development 
      fallback: 'style-loader', 
     }), 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file?name=public/fonts/[name].[ext]', 
     }, 
    ], 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    modules: [path.resolve(__dirname, 'node_modules')], 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['main'], 
    }), 
    new SassLintPlugin({ 
     configFile: '.sass-lint.yml', 
     context: [path.resolve(__dirname, './assets/scss/')], 
     ignoreFiles: [], 
     ignorePlugins: [], 
     glob: '**/*.s?(a|c)ss', 
     quiet: false, 
     failOnWarning: false, 
     failOnError: true, 
     testing: false, 
    }), 
    extractSass, 
    new HtmlWebpackPlugin({ 
     title: 'Calendar Component', 
     template: 'assets/index-template.html', 
     minify: { 
     collapseWhitespace: process.env.NODE_ENV === 'production', 
     }, 
    }), 
    ], 
}; 

Meine Bündel richtig in index.html, app.js und main.js und ./dist Ordner erstellt werden.

Aber ich habe einen Fehler: Kann nicht Electron bei my_path_project/dist

Meine Skripte package.json zu finden sind:

"main": "./dist/main.js", 
    "scripts": { 
    "start": "electron ./dist/", 
    "dev": "NODE_ENV=development webpack" 
    }, 

Kann mir jemand helfen?

Vielen Dank im Voraus.

Answer 1

Wahrscheinlich weil es niemanden gibt. Sie installieren das Elektron zu Ihren Knotenmodulen, Sie beziehen sich darauf in modules: [path.resolve(__dirname, 'node_modules')].

einfach Ihren Startbefehl ändern:

"main": "dist/main.js", 
    "scripts": { 
    "start": "electron ." 
    }, 

Answer 2

Die Lösung von @Anatoly mir geholfen, die Elektronen Fenster zu erscheinen, aber ich konnte nicht über Elektronen reagieren laufen.

So fand ich dieses Tutorial, das reagieren über Elektron laufen gearbeitet: https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c

ich das hoffentlich helfen;)