bitshares-ui|bitshares-ui 交易所项目入口简析 bitshares-ui交易所项目入口简析

根据项目的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中的代码 Loading...

这个就是页面刚刚一打开我们所看到了东西，黑色的背景以及“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") ] }

【bitshares-ui|bitshares-ui 交易所项目入口简析】可以让我们清晰的看到，入口文件就是app/main.js，来到这个文件中，在这文件中主要就导入了两个外部的文件，一个是"./assets/loader"和“index.js”顺着这个走下去，这个"./assets/loader"不是重点，里面导入的基本都是一些配置文件以及一些语言图片等等的导入，重点关注“index.js”这个文件。从index.js 中可以看到绑定了html页面，导入了AppInit.jsx，从这里开始就正式迈入了这个项目以及react。
在AppInit.jsx中实现了对首页（初始页）的生成，在这个文件中还导入了App.jsx这个文件，我们切到App.jsx这个目录里面去，看到很多的组件被导入进来，那么在这里，我们就真的进入了这个项目。