根据项目的package.json文件，可以找到这个项目的start的地方，在这个项目中package.json部分代码
"scripts": {
"compile-tv-css": "node-sass ./charting_library/static/scss/ --output ./charting_library/static/ --output-style compressed",
"test:market": "cross-env NODE_ENV=test mocha --require babel-core/register --watch --watch-extensions js ./app/test/marketTests",
"bench:market": "cross-env NODE_ENV=test babel ./lib/common/MarketClasses.js -o ./app/test/MarketClasses.js && cross-env NODE_ENV=test node --harmony ./test/marketBenchmark",
"profile-dev": "webpack --env.dev --env.profile --profile --json > stats-dev.json",
"profile-build": "cross-env NODE_ENV=production webpack --env.prod --env.profile --env.hash --env.baseUrl='' --profile --json > stats-prod.json",
"profile-nougly": "cross-env NODE_ENV=production webpack --env.prod --env.profile --env.hash --env.noUgly --profile --json > stats-prod-nougly.json",
"start": "cross-env NODE_ENV=development node server.js",
"start-perf": "cross-env NODE_ENV=development node server.js perf-dev",
"prestart-electron": "cross-env NODE_ENV=production webpack --env.hash --env.noUgly --env.electron --env.prod && npm run prepare-electron",
从代码中我们可以找到"start"，这就是我们在终端敲npm start 时候启动项目的命令行,从这里我们可以发现，“node server.js”，这里说明了server.js是这个项目的入口，找到了入口文件就可以开始研究项目了。在server.js中可以发现这么一段代码
app.use("*", function(req, res, next) {
var filename = path.join(compiler.outputPath, "index.html");
compiler.outputFileSystem.readFile(filename, function(err, result) {
if (err) {
return next(err);
}
res.set("content-type", "text/html");
res.send(result);
res.end();
});
});
从这里就可以清晰的知道，当服务启动之后，不管你在浏览器里面输入什么地址或者路由，都会从这里匹配到相应的服务去，那么就顺着这个线路往下面继续探索，通过配置文件，我们就找到了app/assets/index.hbs这个文件了，在server.js中看到的是index.html 但是这里是index.hbs 有些奇怪，主要这个index.hbs是一个模版可以通过webpacke.config.js这个配置文件中的一些插件生成index.html
new HtmlWebpackPlugin({
template: "!!handlebars-loader!app/assets/index.hbs",
templateParameters: {
title: "BitShares " + __VERSION__,
INCLUDE_BASE: !!env.prod && !env.hash,
PRODUCTION: !!env.prod,
ELECTRON: !!env.electron
}
})
来到index.hbs 发现
//style中的部分代码
body {
background-color:#2a2a2a;
}
//body中的代码
<main id="content">
<h1 class="centerDiv" style="">Loading...</h1>
</main>
这个就是页面刚刚一打开我们所看到了东西，黑色的背景以及“Loading...”，这个都是在index.hbs 被编译了之后的index.html 给呈现的。由于这个项目是用react.js前端框架写的，所以，对于id和class 我们必需得重点关注。这个react.js怎么和项目结合起来呢？在js文件中通过document.getElementById("");寻找html中的id或者class。在这个项目中，webpack.config.js文件中
var config = {
mode: env.noUgly ? "none" : env.prod ? "production" : "development",
entry: {
app: env.prod
? path.resolve(root_dir, "app/Main.js")
: [
"webpack-hot-middleware/client",
"react-hot-loader/patch",
path.resolve(root_dir, "app/Main.js")
]
}
可以让我们清晰的看到，入口文件就是app/main.js，来到这个文件中，在这文件中主要就导入了两个外部的文件，一个是"./assets/loader"和“index.js”顺着这个走下去，这个"./assets/loader"不是重点，里面导入的基本都是一些配置文件以及一些语言图片等等的导入，重点关注“index.js”这个文件。从index.js 中可以看到绑定了html页面，导入了AppInit.jsx，从这里开始就正式迈入了这个项目以及react。
在AppInit.jsx中实现了对首页（初始页）的生成，在这个文件中还导入了App.jsx这个文件，我们切到App.jsx这个目录里面去，看到很多的组件被导入进来，那么在这里，我们就真的进入了这个项目。
网友评论