Electron/React应用程序中的热重新加载

问题描述：

热重新加载似乎不再有效。我不确定在我的设置中会发生什么变化，事实上，据我所知，git日志显示，没有任何变化。Electron/React应用程序中的热重新加载

无论如何，我试图重新加载CSS和反应.jsx文件的工作。

目前，我运行npm run watch，然后在另一个控制台选项卡中运行npm run start。应用程序启动，但文件中的任何更改都不会重新加载。我的package.json如下所示：

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

省略了一些不必要的依赖关系。我webpack.config.js如下所示：

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" 
     } 
    ] 
    }  
};

我缺少什么变热重装在此设置的工作？

编辑：正如你所看到的，入口点被定义为index.jsx。此文件非常简单，如下所示：

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') 
);

每当我对此文件进行更改时，都会触发热重新加载。另外，这里导入的文件（如styles.css）的更改也会重新加载。问题是，我的所有组件显然都是在我的路由器中导入的。因此，对我的组件进行的任何更改都不会重新加载。我如何才能正常工作？

是你的所有的JS文件与'jsx'扩展？你的第一个装载器会通知考虑'jsx'的扩展。可以更新你的问题？ –

是的，所有组件都有'.jsx'扩展名。 – Orbit

组件的任何使用都必须大写，试试吧。我知道它很奇怪，但我已经看到它。路线 - >路线 – JordanHendrix

答

如果您正在使用WebStorm或其他支持'SafeWrite'的编辑器，您可能需要禁用它。

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

安全写‘ 注意，很多编辑器都支持‘安全写“与编辑/ IDE的支持工作’’功能，并已将其默认启用，这使得开发服务器无法正确观看的文件。“安全写“意味着更改不会直接写入原始文件，而是写入临时文件，而保存操作成功完成后，该文件将被重命名并替换原始文件。此行为会导致文件观察器由于原始文件被删除而丢失曲目。为防止出现这个问题，您必须在编辑器中禁用“安全写入”功能。

VIM - 设置：设置backupcopy = yes（参见文档） IntelliJ - 设置▶︎系统设置▶︎同步▶︎禁用安全写入（可能在各种IntelliJ IDE中不同，但仍可以使用搜索功能）“

我目前正在使用Sublime Text。请注意，正如我原始文章的编辑中所述，只有少量文件会触发热重载，所以这不是问题。 – Orbit

看看我链接的页面底部的评论。第一个可能是“... Webpack对输出配置属性的路径和文件名属性的值非常挑剔......”。 –

输出路径不是问题，因为应用程序确实在我的'/ build'目录中放置了一个包。 – Orbit

答

有时组件不知道如何自行重新加载。您可以尝试添加到您的index.jsx：

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

如果不工作，我会建议依靠react-hot-loader。

您必须安装webpack-hot-middleware，并更改您的entry以包含它。

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

由于您使用的--hot选项的事实，我不相信你需要添加HotModuleReplacementPlugin，但我可能是错的。

还有反应热装载机的那是未来的V3，并且你可以看看，但我认为这是对你更好，如果你留在稳定版本给您正在使用的WebPack 1

您也可以结帐完整的react-transform-boilerplate回购，它提供了一个完整的工作配置与Webpack热重新加载。

我试着将你提到的语句'if（module.hot）{}'添加到我的'index.jsx'中，但没有看到改进。我想强调一下，index.jsx和router.jsx是否会在更改时重新加载，但没有其他UI组件会这样做。正因为如此，热重载应该正常工作，并且我认为一些配置是不正确的。 – Orbit

你的组件也是jsx文件吧？ –

这是正确的。 – Orbit

答

我使用到webpack.config.js此选项：

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

而进入package.json此选项：

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

Electron/React应用程序中的热重新加载

相关推荐