今天想要动手实现《深入React技术栈》里的demo，第一步就是要搭一个react+简单的express的环境，用到了webpack这个打包工具。
跟着书上的例子来。
第一次常识，完全按照书上的步骤，先下好webpack+webpack-dev-server。在配置好了webpack.config.js以及express的server.js
//webpack.config.js
var path = require('path');
var webpack = require('webpack');
var sassLoader = 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true';
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./js/app.js',
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/static/',
},
module: {
loaders: [{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, 'js'),
],
loaders: ['react-hot', 'babel'],
},
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'css'),
],
loader: sassLoader
}],
},
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react'),
},
extensions: ['', '.js', '.jsx', '.scss', '.css'],
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
};
server.js
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');
var app = express();
var compiler = webpack(config);
var webpackDevOptions = {
noInfo: true,
historyApiFallback: true,
publicPath: config.output.publicPath,
headers: {
'Access-Control-Allow-Origin': '*'
}
};
app.use(require('webpack-dev-middleware')(compiler, webpackDevOptions));
app.use(require('webpack-hot-middleware')(compiler));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(8300, '0.0.0.0', function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:8300');
});
以及babel的配置文件：
{
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}],
["transform-decorators-legacy"]
]
},
"production": {
"plugins": [
["transform-decorators-legacy"]
]
}
}
}
然后建了一个HTML，以及一个存放react组件js文件夹。
然后在下babel大礼包。
image.png
照理来说应该是可以快乐的npm start，然后在localhost:8300里就可以看到一个简单的hello world了。然鹅，
页面感觉如同冬日里的第一场雪。
image.png
React组件根本都没有渲染进去。
然后我就各种修改配置里面的路径。始终不行。
在google了一下react+webpack开发环境搭建
感觉这个教程清晰明了，有种能够打出来了呢的错觉。
image.png
然鹅。
这回憋说渲染了，报了一个脑壳疼的错
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
前前后后花了我一个上午。差点要被webpack劝退了。想想没有webpack，React又不是用不了但是我转念又想啊，难道一辈子都不用webpack了吗？
于是，向大佬低头。
在自己配置失败的文件目录中，粘贴了大佬的React组件代码，然后因为自己的目录和原书的目录不同，就稍稍改了下路径。
可能是大佬的代码写啥都对吧。
也可能是我的代码被下了降头把。（不，其实就是菜的扣jio）
我觉得自己的React组件代码好像也没有写错啊。
为什么奇迹般地。
React竟然。
tmd。
渲染出来了。
image.png
为绳莫哦。
我觉得冷静一下，然后仔细思考一下，为什么大佬的代码就是那么的优秀。
还没到一炷香的功夫，我对比了一下代码：
<!-- index.html 失败版本-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/bundle.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<!-- index.html 成功版本-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
哦。。。。我觉得应该看看HTML加载资源的原理了。
当浏览器向服务器发起一次请求之后，xxx.com,服务器会向浏览器返回字符串，即HTML代码。接下来的执行情况是这样的。浏览器会一点点的从头接收这些字符串，然后从<html>节点开始分析，从上到下，遇到<script>节点就开始执行JS代码，在此同时，也会一点点的加载HTML控件。（分析与执行JS代码与加载HTML控件是两个同时进行的线程）所以现在document.getElementById这个方法如果获取页面尾部的控件，很有可能为空，因为这时候还没有加载到。而且，在此同时，浏览器也在加载外部CSS文件，并且应用到相应的控件上。
来自CSDN
所以说 要注意细节 嗯。
网友评论