根據(jù)項(xiàng)目的package.json文件蒿褂，可以找到這個(gè)項(xiàng)目的start的地方尼啡，在這個(gè)項(xiàng)目中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 時(shí)候啟動(dòng)項(xiàng)目的命令行,從這里我們可以發(fā)現(xiàn)暇屋，“node server.js”锦茁，這里說明了server.js是這個(gè)項(xiàng)目的入口攘轩，找到了入口文件就可以開始研究項(xiàng)目了。在server.js中可以發(fā)現(xiàn)這么一段代碼
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();
});
});
從這里就可以清晰的知道蜻势，當(dāng)服務(wù)啟動(dòng)之后撑刺，不管你在瀏覽器里面輸入什么地址或者路由，都會從這里匹配到相應(yīng)的服務(wù)去握玛，那么就順著這個(gè)線路往下面繼續(xù)探索够傍，通過配置文件，我們就找到了app/assets/index.hbs這個(gè)文件了挠铲，在server.js中看到的是index.html 但是這里是index.hbs 有些奇怪冕屯，主要這個(gè)index.hbs是一個(gè)模版可以通過webpacke.config.js這個(gè)配置文件中的一些插件生成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 發(fā)現(xiàn)
//style中的部分代碼
body {
background-color:#2a2a2a;
}
//body中的代碼
<main id="content">
<h1 class="centerDiv" style="">Loading...</h1>
</main>
這個(gè)就是頁面剛剛一打開我們所看到了東西，黑色的背景以及“Loading...”拂苹，這個(gè)都是在index.hbs 被編譯了之后的index.html 給呈現(xiàn)的安聘。由于這個(gè)項(xiàng)目是用react.js前端框架寫的，所以瓢棒，對于id和class 我們必需得重點(diǎn)關(guān)注浴韭。這個(gè)react.js怎么和項(xiàng)目結(jié)合起來呢？在js文件中通過document.getElementById("");尋找html中的id或者class脯宿。在這個(gè)項(xiàng)目中念颈，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连霉，來到這個(gè)文件中榴芳，在這文件中主要就導(dǎo)入了兩個(gè)外部的文件，一個(gè)是"./assets/loader"和“index.js”順著這個(gè)走下去跺撼，這個(gè)"./assets/loader"不是重點(diǎn)窟感，里面導(dǎo)入的基本都是一些配置文件以及一些語言圖片等等的導(dǎo)入，重點(diǎn)關(guān)注“index.js”這個(gè)文件歉井。從index.js 中可以看到綁定了html頁面柿祈，導(dǎo)入了AppInit.jsx，從這里開始就正式邁入了這個(gè)項(xiàng)目以及react哩至。
在AppInit.jsx中實(shí)現(xiàn)了對首頁（初始頁）的生成躏嚎，在這個(gè)文件中還導(dǎo)入了App.jsx這個(gè)文件，我們切到App.jsx這個(gè)目錄里面去憨募，看到很多的組件被導(dǎo)入進(jìn)來紧索，那么在這里，我們就真的進(jìn)入了這個(gè)項(xiàng)目菜谣。
