React学习之围棋记谱本制作（一）环境准备

悠悠 2022-04-11 09:16 163阅读 0赞

这几天边学边做，实现了react+bootstrap+jquery+webpack+express+oracledb的集成。  
  
　　oracledb编译请看：\[url\]http://wallimn.iteye.com/blog/2339894\[/url\]  
　　webpack打包bootstrap请看：\[url\]http://wallimn.iteye.com/blog/2342194\[/url\]  
　　webpack学习请看：\[url\]http://wallimn.iteye.com/blog/2337882\[/url\]  
  
　　网上类似的文章很多。我只贴一下我的两个重要配置文件。  
  
一、package.json

{
       
      "name": "rwne",
      "version": "1.0.0",
      "description": "React+Webpack+Node.js+Express",
      "main": "app.js",
      "scripts": {
       
        "test": "test"
      },
      "keywords": [
        "wallimn",
        "study"
      ],
      "author": "wallimn",
      "license": "ISC",
      "dependencies": {
       
        "babel-core": "^6.18.2",
        "babel-loader": "^6.2.8",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "bootstrap-sass": "^3.3.7",
        "css-loader": "^0.26.0",
        "ejs": "^2.5.2",
        "express": "^4.14.0",
        "jquery": "^3.1.1",
        "jsx-loader": "^0.13.2",
        "nodemon": "^1.11.0",
        "oracledb": "^1.11.0",
        "react": "^15.4.0",
        "react-dom": "^15.4.0",
        "style-loader": "^0.13.1",
        "tether": "^1.3.8",
        "webpack": "^1.13.3"
      },
      "devDependencies": {
       
        "bootstrap-loader": "^1.3.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "file-loader": "^0.9.0",
        "html-webpack-plugin": "^2.24.1",
        "node-sass": "^3.13.0",
        "resolve-url-loader": "^1.6.0",
        "sass-loader": "^4.0.2",
        "url-loader": "^0.5.7"
      }
    }

二、webpack.config.js

三、程序入口app.js

// 引入模块
    var express = require('express');
    var path = require('path');
    var ejs = require('ejs');
    
    var app = express();
    
    // 新增接口路由
    app.get('/data/:module', function (req, res, next) {
       
        var c_path = req.params.module;
        var Action = require('./server/action/' + c_path);
        Action.execute(req, res);
    });
    
    // 对所有(/)URL或路由返回index.html 
    app.get('/', function (req, res) {
       
        res.render('index');
    });
    // 对所有(/)URL或路由返回index.html 
    app.get('/go', function (req, res) {
       
        res.render('go');
    });
    
    // 设置views路径和模板
    app.set('views', path.join(__dirname, 'dist'));
    app.set('view engine', 'html');
    app.engine('html', ejs.renderFile);
    
    // app.use配置
    app.use('/', express.static(path.join(__dirname, 'dist')));
    
    // 启动一个服务，监听从8888端口进入的所有连接请求
    var server = app.listen(8888, function(){
       
        var host = server.address().address;
        var port = server.address().port;
        console.log(__dirname);
        console.log(path.join(__dirname, 'dist'));
        console.log("views="+app.get("views"));
        console.log("process.cwd()="+process.cwd());
        console.log('Listening at http://%s:%s', host, port);
    });

四、所有文件  
　　把所有文件打包上传一下，可以作为node.js的web项目的基础配置及示范。如有需要请从附件下载。