2017-11-16 6 views
2

Webpack、React、Babel、React Hot Loaderの最新版を利用した最小限のプロジェクトを設定しようとしました。 私はhereと同じ問題があります。ただし、唯一の違いはbabel-preset-es2015の代わりに(上記のものの横にある)babel-preset-envを使用していることです。この修正は私には当てはまりません。リアクションホットローダーは動作しているようですが、更新しません。 [babel-preset-env]

要約:すべてが動作し、React Hot Loaderは変更を検出しますが、コンポーネントは再レンダリングされず、変更はWebサイトに適用されません。

You can find the complete project here.(ヤーンインストール/糸始動が開始されるはずです)testString/components/App.jsに変更してファイルを保存することで、この現象を再現できます。

私は間違っていますか?

webpack.config.js .babelrc

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() 
     ] 

} 

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

答えて

1

さて私は単に{「モジュール」:偽}設定する必要があることに気づいた「ENV」のプロパティ「はes2015」プリセットと同じ方法をプリセット。

.babelrc

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

}

関連する問題