電子と反応とウェブパック

Question

私はwebpackで簡単な電子アプリを動かして反応しようとしています。

だから私は、私のバンドルはindex.htmlを、app.jsとmain.jsと./distフォルダに正しく作成され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', 
     }, 
    }), 
    ], 
}; 

と私のWebPACKを設定します。

しかし、私はエラーだ：package.jsonでmy_path_project/distの

私のスクリプトで電子を見つけることができませんが、次のとおりです。

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

誰も私を助けることができますか？

ありがとうございます。

Answer 1

おそらく誰もいないので。あなたはあなたのノードモジュールに電子をインストールしています。それはmodules: [path.resolve(__dirname, 'node_modules')]という意味です。

単純にあなたのstartコマンドを変更します。

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

Answer 2

@Anatolyからの溶液を電子ウィンドウを表示されるように私を助け、私は電子上の反応を実行することができませんでした。

だから私は実行するために働いていた、このチュートリアルでは、電子上で反応した： https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c

私はこれが役立つことを願っています。）