Reactjs 不将DOM附加到HTML
我的ReactJs代码中有一些问题。一切都是编译没有任何错误使用网页包。但是在webpack dev服务器启动之后,当我浏览localhost:9000时,没有任何东西从ReactJs插入DOM 我正在终端上运行npm start 这是我写的所有代码- .babelrcReactjs 不将DOM附加到HTML,reactjs,webpack,ecmascript-6,babeljs,Reactjs,Webpack,Ecmascript 6,Babeljs,我的ReactJs代码中有一些问题。一切都是编译没有任何错误使用网页包。但是在webpack dev服务器启动之后,当我浏览localhost:9000时,没有任何东西从ReactJs插入DOM 我正在终端上运行npm start 这是我写的所有代码- .babelrc { "presets": ["es2015", "react", "stage-0"] } { "ecmaFeatures": { "jsx": true, "modules": true },
{
"presets": ["es2015", "react", "stage-0"]
}
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
.eslintrc
{
"presets": ["es2015", "react", "stage-0"]
}
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
.jslintrc
{
"presets": ["es2015", "react", "stage-0"]
}
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
index.html
<html>
<head>
<title>Forms in React Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div id='root' class="container">
</div>
</body>
<script src="/static/bundle.js" type="text/javascript"></script>
</html>
提前感谢大家。在您的webpack.confg.js中,您有以下内容:
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
'./src/index' // <-- no src dir in project
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src')], // <-- no src dir in project
},
{
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
// cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}
]
}
]
}
};
经过测试,在我的本地电脑上运行。找到了解决方案。
在规则
部分,我犯了一些错误。以下是正确的规则
rules: [{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src/')],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
}
]
}]
这将是正确的webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src/')],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
}
]
}]
}
};
感谢大家的帮助。JS控制台中是否有错误?或者您在编译期间以及运行时都没有任何错误?请打开控制台并检查是否有任何错误。这将为您指明正确的方向。@saadq控制台上没有错误。@AndrewLi已经发布了代码并给出了要点链接。