折腾：
【已解决】ReactJS-AdminLTE中如何调试和哪部分代码是首页的源码
期间，经过一番折腾，终于大体上看懂了ReactJS-AdminLTE，即adminlte-reactjs的development模式时的代码的基本逻辑了。
1.命令行中运行：npm run dev
匹配到
ReactJS-AdminLTE/package.json
中的：
“scripts”: { “dev”: “node server.js”, }, |
2.node server.js调用：
ReactJS-AdminLTE/server.js
其中前半段代码：
var http = require(“http”); //1 var url = require(“url”); //2 var express = require(“express”); var consolidate = require(‘consolidate’); var handlebars = require(‘handlebars’); var bodyParser = require(‘body-parser’); var routes = require(‘./routes’); var app = express(); app.set(‘views’, ‘views’); //Set the folder-name from where you serve the html page. ] app.set(‘view engine’, ‘html’); app.engine(‘html’, consolidate.handlebars); app.use(express.static(‘./public’)); //Set the folder from where you serve all static files like images, css, javascripts, libraries etc app.use(bodyParser.urlencoded({ extended: true })); var portNumber = process.argv[2] || 8000; http.createServer(app).listen(portNumber, function(){ console.log(‘Server listening at port ‘+ portNumber); routes.initialize(app); }); |
中，核心的是：
用http.createServer创建了一个http的服务器？
更关键的是：
var routes = require(‘./routes’); routes.initialize(app); |
3.其中调用了：
ReactJS-AdminLTE/routes.js
function initialize(app){ //These are the API end points that you can write. //Setting up an event listener for GET request to ‘/’ app.get(‘/’, function(req, res){ console.log(‘request to / received’); res.render(‘dashboard.html’); }); } |
即，当我们在浏览器中输入地址：
就匹配到了 “/“ 这个路由，所以调用显示dashboard.html
4.网页模板
ReactJS-AdminLTE/views/dashboard.html
中，之前已改为用development模式的React Hot Loader的代码：
<script src=”https://code.jquery.com/jquery-3.1.1.min.js” integrity=”sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=” crossorigin=”anonymous”></script> <script src=”http://localhost:3000/dist/js/app.js”></script> <script src=”http://localhost:3000/dist/js/vendors.js”></script> <script src=”http://localhost:3000/dist/js/chartVendors.bundle.js”></script> <script src=”http://localhost:3000/dist/js/dashboardV1.bundle.js”></script> |
其中调用了：
其下的文件
-》实际上指的是：
webpackDevServer所监听的端口3000，会动态编译出对应的dist/js/app.js等源文件的
5.而此处的dist/js/app.js等源文件，又是来自于上面提到的：
ReactJS-AdminLTE/server.js
的后半段代码（已去掉注释）
let webpackListenPort = 3000; var webpack = require(‘webpack’); var WebpackDevServer = require(‘webpack-dev-server’); var config = require(‘./webpack.config’); new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, inline: true, historyApiFallback: true }).listen(webpackListenPort, ‘localhost’, function (err, result) { if (err) { console.log(err); } console.log(`Listening at localhost:${webpackListenPort}`); }); |
WebpackDevServer监听了3000端口，然后根据对应的
‘./webpack.config’
的配置去生成对应的文件的。
6.而此处的
ReactJS-AdminLTE/webpack.config.js
中，除了之前提到的相关hot reloader的配置：
plugins: [ new webpack.HotModuleReplacementPlugin(), 。。。 new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // to not to load all locales ], |
之外，还定义了对应的entry和output：
entry: { dashboardV1: ‘./src/pages/dashboardV1/js/dashboard’, widgets: [‘./src/pages/widgets-page/js/widgets-page’], timeline: ‘./src/pages/timeline-page/js/timeline-page’, generalUIElements: ‘./src/pages/ui-elements-page/general/js/page-ui-elements’, vendors: [‘react’, ‘react-dom’, ‘jquery’, ‘velocity-animate’, ‘jqueryUi’, ‘bootstrap’, ‘moment’, ‘bootstrapDatepicker’], chartVendors: [‘jquery’, ‘raphael’, ‘morris’, ‘jvectormap’, ‘jvectormapWorld’], }, output: { path: path.join(__dirname, “public”), filename: “dist/js/[name].bundle.js”, libraryTarget: “umd”, umdNamedDefine: true, }, |
指的就是说此处有多个entry入口和每个入口对应所依赖的源文件，比如：
dashboardV1，就依赖着源文件：
‘./src/pages/dashboardV1/js/dashboard’
即：
AdminLTE_Demo/ReactJS-AdminLTE/src/pages/dashboardV1/js/dashboard.js
其中的代码，主要就是ReactJS的代码，包括常见的：
React.createClass
componentDidMount
componentDidUpdate
render
且：
ReactDOM.render(<Dashboard />, document.getElementById(‘dashboard-container’)); |
对应着：
ReactJS-AdminLTE/views/dashboard.html
中的：
<body class=”skin-blue sidebar-mini wysihtml5-supported”> <div id=”dashboard-container”> <!– Dashboard component gets rendered here –> </div> |
同理，其他页面，比如：
widgets，也依赖着：
‘./src/pages/widgets-page/js/widgets-page’
对应着的：
ReactJS-AdminLTE/src/pages/widgets-page/js/widgets-page.js
7.且
AdminLTE_Demo/ReactJS-AdminLTE/src/pages/dashboardV1/js/dashboard.js
中，所define中的，相当于import，导入了其他的子页面或组件：
比如：
‘./components/navigation-menu’
对应着
/ReactJS-AdminLTE/src/pages/dashboardV1/js/components/navigation-menu.js
比如其中修改的内容：
中文文字，去掉了搜索框等内容，在页面上就可以体现出来了：
转载请注明：在路上 » 【整理】ReactJS-AdminLTE中的代码调用逻辑