Question

我尝试建立一个最小的项目，它利用最新版本的Webpack，React，Babel和React Hot Loader。我遇到与here所述相同的问题。但唯一的区别是我使用的是（仅限于上面提到的内容） babel-preset-env而不是babel-preset-es2015，因此修复程序不适用于我。

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

You can find the complete project here.（纱线安装/纱线启动应该启动它）您可以通过更改testString中的/components/App.js并保存文件来重现行为。

我做错了什么？

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

好的，我意识到我只需要为＆＃34; env＆＃34;设置{＆＃34; modules＆＃34;：false}属性。预设方式与＆＃34; es2015＆＃34;相同。预设。

<强> .babelrc

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

}

React Hot Loader似乎可以工作，但不会更新。 [巴别预置-ENV]

1 个答案: