javascript - React Hot Loader 似乎可以工作但不会更新。 [babel-preset-env]

Question

我尝试建立一个使用最新版本的 Webpack、React、Babel 和 React Hot Loader 的最小项目。我遇到与描述相同的问题 here .然而，唯一的区别是我正在使用 (除了上面提到的东西) babel-preset-env 而不是 babel-preset-es2015 ，因此该修复不适用于我。

简而言之:一切正常，React Hot Loader 会检测到更改，但组件不会重新呈现，更改也不会应用到网站。

You can find the complete project here. (yarn install/yarn start 应该启动它)您可以通过更改 /components/App.js 中的 testString 并保存文件来重现该行为。

我做错了什么？

webpack.config.js

var webpack = require('webpack')

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
              }
            }
          ]
    },
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
      ]

}

.babelrc

{
    "presets": [
      "react",
      [ "env", {
        "targets": {
          "browsers": "> 10%"
        }
      }]
    ],
    "plugins": ["react-hot-loader/babel"]
  }

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'

const render = Component => {
    ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.getElementById('app'),
    )
  }

render(App)

if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App', () => { render(NextApp) })
}

package.json

{
  "name": "minimal-react",
  "version": "0.1.0",
  "description": "minimal react",
  "main": "index.js",
  "repository": "https://github.com/PeterKey/minimal-react.git",
  "dependencies": {
    "path": "^0.12.7",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react-hot-loader": "^3.1.3"
  },
  "scripts": {
    "start": "webpack-dev-server --progress --colors --config ./webpack.config.js"
  }
}

Answer 1

好吧，我意识到我只需要为“env”预设设置 {“modules”: false} 属性，方法与为“es2015”预设设置的方式相同。

.babelrc

{
"presets": [
  "react",
  [ "env", {
    "modules": false,
    "targets": {
      "browsers": "> 10%"
    }
  }]
],
"plugins": ["react-hot-loader/babel"]