Webpack、React、Babel、React HotLoaderの最新バージョンを利用する最小限のプロジェクトをセットアップしようとしました。ここで説明したのと同じ問題があります。ただし、唯一の違いは、の代わりに(上記のものだけで babel-preset-env
なく)使用babel-preset-es2015
していることです。したがって、修正は適用されません。
つまり、すべてが機能し、React Hot Loaderは変更を検出しますが、コンポーネントは再レンダリングされず、変更はWebサイトに適用されません。
完全なプロジェクトはここにあります。あなたが変更することで動作を再現することができます(糸インストール/糸スタートは、それが始める必要があります)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"
}
}
さて、「es2015」プリセットの場合と同じ方法で、「env」プリセットの{"modules":false}プロパティを設定するだけでよいことに気付きました。
.babelrc
{
"presets": [
"react",
[ "env", {
"modules": false,
"targets": {
"browsers": "> 10%"
}
}]
],
"plugins": ["react-hot-loader/babel"]
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加