Hot reload w aplikacji Electron/React

Question

Hot reloading wydaje się już nie działać. Nie jestem pewien, co można zmienić w mojej konfiguracji, w rzeczywistości, o ile mogę powiedzieć, i dzienniki git pokazują, nic się nie zmieniło.

Bez względu na to, próbuję przeładować pliki CSS i Reakcje na pliki .jsx.

Obecnie uruchamiam npm run watch, a następnie npm run start w innej karcie konsoli. Aplikacja zostanie uruchomiona, ale wszelkie zmiany w plikach nie zostaną ponownie załadowane. Moje package.json wygląda następująco:

{ 
    ... 
    "main": "main.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "cross-env ENVIRONMENT=DEV electron main.js", 
    "watch": "webpack-dev-server --hot --inline", 
    "build": "webpack" 
    }, 
    "dependencies": { 
    "axios": "^0.15.2", 
    "babel": "^6.5.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-transform-class-properties": "^6.19.0", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babelify": "^7.2.0", 
    "cross-env": "^3.1.1", 
    "electron": "^1.3.4", 
    "electron-prebuilt": "^1.4.2", 
    "json-loader": "^0.5.4", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "react-router": "^2.8.1", 
    "react-tap-event-plugin": "^1.0.0", 
    "semantic-ui-react": "^0.56.13", 
    "socket.io-client": "^1.5.0", 
    "store": "^1.3.20", 
    "webpack": "^1.13.3" 
    }, 
    "devDependencies": { 
    "css-loader": "^0.25.0", 
    "style-loader": "^0.13.1", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

Pomijane są niektóre niepotrzebne zależności. Moja webpack.config.js wygląda następująco:

var path = require("path"); 

module.exports = { 
    entry: path.resolve(__dirname, "app/index.jsx"), 
    output: { 
    path: path.resolve(__dirname, "build"), 
    publicPath: 'http://localhost:8080/build/', 
    filename: 'app.js' 
    }, 
    module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
     }, 
     { 
      test: /\.json$/, 
      loader: "json-loader" 
     } 
    ] 
    }  
}; 

Co mi brakuje na gorącą reload pracuje w tej konfiguracji?

EDYCJA: Jak widać, punkt wejścia jest zdefiniowany jako index.jsx. Plik ten jest bardzo prosty i wygląda następująco:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import styles from './styles.css' 
import routes from './router.jsx' 

ReactDOM.render(
    routes, 
    document.getElementById('app') 
); 

Ilekroć wprowadzić zmiany w tym pliku, gorące przeładowania jest wyzwalany. Ponadto, zmiany w importowanych plikach (takich jak styles.css) są również ponownie ładowane. Problem polega na tym, że wszystkie moje komponenty są oczywiście importowane do mojego routera. Wszelkie zmiany w moich składnikach nie są więc ponownie ładowane na gorąco. Jak mogę to poprawnie uruchomić?

Answer 1

Jeśli używasz WebStorm lub innego edytora obsługującego "SafeWrite", może być konieczne wyłączenie go.

https://webpack.github.io/docs/webpack-dev-server.html

„Praca z editors/IDE wspiera«bezpieczną napisać» Trzeba zauważyć, że wielu redaktorów«bezpieczne write»funkcja i go domyślnie włączona, co sprawia, że ​​serwer dev stanie oglądać pliki poprawnie.„Safe write "oznacza, że ​​zmiany nie są zapisywane bezpośrednio do oryginalnego pliku, ale do tymczasowego, który jest przemianowywany i zastępuje oryginalny plik po pomyślnym zakończeniu operacji składowania, co powoduje utratę ścieżki przez plik, ponieważ oryginalny plik został usunięty. Aby zapobiec temu problemowi, musisz wyłączyć funkcję "Bezpieczne zapisywanie" w edytorze. 0 VIM - set: set backupcopy = yes (zobacz dokumentację) IntelliJ - Ustawienia ▶ ︎ Ustawienia systemu ▶ ︎ Synchronizacja ▶ ︎ wyłącz bezpieczny zapis (mogą się różnić w różnych IDI IntelliJ, ale nadal możesz korzystać z funkcji wyszukiwania) "

Answer 2

Czasami składnik nie wie, jak się samo ładować. Można spróbować dodać do index.jsx:

if (module.hot) { 
    module.hot.accept() 
} 

Jeśli to nie działa, chciałbym zaproponować, aby polegać na react-hot-loader.

Będziesz musiał zainstalować webpack-hot-middleware i zmienić swój entry, aby go uwzględnić.

entry: [ 
    'webpack-hot-middleware/client', 
    path.resolve(__dirname, 'build') 
] 

Biorąc pod uwagę fakt, że używasz opcji --hot, nie wierzę, trzeba dodać HotModuleReplacementPlugin, ale mogę się mylić.

Istnieje również v3 ładowarki reagować-gorąco, że nadchodzi i że można patrzeć, ale myślę, że to lepiej dla ciebie, jeśli pobyt na stabilnych wydaniach podane używasz WebPACK 1.

Można również kasa pełne repozytorium react-transform-boilerplate, które zapewnia kompletną działającą konfigurację do szybkiego ładowania z pakietem Webpack.

Answer 3

używam do webpack.config.js to opcje:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    name: 'client', 
    entry: './client.js', 
    output: { 
    path: __dirname, filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/,   // Match both .js and .jsx files 
     exclude: /node_modules/, 
     loader: "babel-loader", 
     query: 
     { 
      presets: ['es2015', 'react'] 
     } 
     } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true 
    }, 
} 

I do package.json tę opcję:

"scripts": { 
    "start": "npm run dev", 
    "webpack": "webpack --progress --colors", 
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline" 
    },