`

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

阅读更多
  这几天边学边做,实现了react+bootstrap+jquery+webpack+express+oracledb的集成。

  oracledb编译请看:http://wallimn.iteye.com/blog/2339894
  webpack打包bootstrap请看:http://wallimn.iteye.com/blog/2342194
  webpack学习请看:http://wallimn.iteye.com/blog/2337882

  网上类似的文章很多。我只贴一下我的两个重要配置文件。

一、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
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

//var goCssExtractor = new ExtractTextPlugin('css/go.css');

module.exports = {
    // 页面入口文件配置
    entry : {
        'main/index': './js/view/main/index.js',
        'main/go': './js/view/main/go.js',
        //'view/main/jquery':'jquery',
        'public/bootstrap':'bootstrap-loader',
    },
    // 入口文件输出配置
    output : {
        path : path.join(__dirname,'..','..','dist'),
        filename : 'js/[name].bundle.js'
    },
    devtool: 'eval-source-map',
    module: {
        // 加载器配置
        loaders: [
        {test: /\.js$/,loader: 'babel-loader!jsx-loader?harmony' },
        //{test: /\.css$/,loader: 'style-loader!css-loader'},
        {test: /\.css$/,loader:ExtractTextPlugin.extract("style-loader","css-loader")},
	    {test: /\.scss$/, loaders:['style','css','sass']},
	    {test: /\.(png|jpe?g|ico|bmp|gif)$/,loader: 'file?limit=10000&name=/img/[name]-[hash:8].[ext]'},  
	    {test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/ ,loader : 'file?limit=10000&mimetype=application/font-woff&name=/font/[name]-[hash:8].[ext]'},  
	    {test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, loader : 'file?name=/font/[name]-[hash:8].[ext]'},  
	    //{test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports-loader' },
    	]        
    },
    // 其他解决方案配置
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.json','.scss'],
    },
	sassLoader:{
		includePaths:[path.resolve(__dirname,'../../node_modules/bootstrap-sass')]
	},
    // 插件项
    plugins : [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
        new webpack.ProvidePlugin({
        	$:'jquery',
        	jQuery:'jquery',
        	"window.jQuery":'jquery'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
	      'window.Tether': 'tether',
	    }),
		new HtmlwebpackPlugin({
		      title: 'empty page',
		      chunks:['main/index','public/bootstrap'],
		      template:'template/index.html',
		      filename:  'index.html',
		}),
		new HtmlwebpackPlugin({
		      title: 'empty page',
		      chunks:[],
		      template:'template/index.html',
		      filename:  'empty.html',
		}),
		new HtmlwebpackPlugin({
		      title: '在线记谱本',
		      chunks:['main/go','public/bootstrap'],
		      template:'template/go.html',
		      filename:  'go.html',
		}),
		new ExtractTextPlugin("css/style.css"),
    ]
}


三、程序入口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项目的基础配置及示范。如有需要请从附件下载。
分享到:
评论

相关推荐

    React学习之围棋记谱本制作(七)总结

    在本篇“React学习之围棋记谱本制作(七)总结”中,我们将深入探讨如何利用React技术栈创建一个功能完善的围棋记谱本应用。React是Facebook开发的一个用于构建用户界面的JavaScript库,尤其适用于构建单页应用。在...

    React学习之围棋记谱本制作(四)前端开发初步完成

    在本项目中,“React学习之围棋记谱本制作(四)前端开发初步完成”是一个教程,旨在教授如何使用React框架构建一个围棋记谱本的前端应用。从给出的标签“源码”和“工具”来看,我们可以推断这个教程会涉及实际的...

    React学习手册.zip

    React是当前前端开发领域中的主流框架之一,由Facebook开发并维护。它以其组件化、虚拟DOM和单向数据流等特点,极大地提升了Web应用的开发效率和性能。本React学习手册将深入探讨React的核心概念和实战技巧,帮助你...

    React 学习之道

    React 学习之道 ==================================================

    react入门学习文档

    React入门学习文档 React 是一个用于构建用户界面的 JavaScript 库,是一个数据驱动的 MVVM 模式的框架。学习 React 需要了解其主要特点、JSX 元素渲染、生命周期、组件事件等知识点。 React 介绍 React 是一个...

    React学习手册完整版带目录.zip

    React是Facebook推出的一款开源JavaScript库,专门用于构建用户界面,特别是单页应用程序(SPA)。它以其组件化开发、虚拟DOM和声明式编程风格而闻名,是现代Web开发中不可或缺的一部分。"React学习手册完整版带目录...

    react学习课件.rar

    这个"react学习课件.rar"文件包含的"react学习课件.docx"文档,很可能是从哔哩哔哩上的一个React教程课程中提取出的学习资料。在React的世界里,有很多关键概念和技术值得深入探讨。 首先,React的核心理念是组件化...

    react-react学习心得

    React是Facebook开发的一款用于构建用户界面的JavaScript库,尤其擅长于构建单页应用程序(SPA)。它主要关注视图层,但也可以与各种库和框架(如Redux、MobX)配合使用来处理状态管理和路由。 React的核心概念是...

    react中文学习资料

    在React的学习过程中,首先需要了解的基本要求包括Node.js环境以及npm(Node Package Manager)。Node.js是一个能够让JavaScript运行在服务器端的平台,npm则是与之配套的包管理工具。这两者是React开发的基础环境。...

    React学习路线脑图

    React学习路线脑图

    React学习资源汇总.pdf

    React学习资源汇总.pdf

    react 学习笔记

    本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命周期 React 组件生命周期是指组件从创建到销毁的整个过程。生命周期方法是指在组件生命周期的不同阶段执行的函数。了解生命周期方法可以帮助...

    React 进阶之路

    在React的世界里,进阶之路意味着深入理解其核心概念、最佳实践以及高级技巧。React作为一个流行的JavaScript库,用于构建用户界面,尤其适用于单页应用程序(SPA)。本篇将围绕React的多个关键知识点展开,帮助...

    React 环境

    总的来说,"React环境"不仅仅是包含“browser.min.js”的简单环境,它涉及到一系列的工具、库和配置,共同构成了一个完整的前端开发工作流。React 15.3.1作为历史版本,虽然在某些方面可能不如最新版强大,但它仍然...

    React 官方学习模板

    通过这个官方学习模板,你可以一步步地跟随教程,从创建第一个React组件开始,直到掌握如何构建完整的React应用。同时,GitHub社区的活跃也意味着你可以在遇到问题时,得到广泛的支持和解答。不断练习和探索,你将能...

    元宇宙初探React+Three.js制作3D全景漫游.zip

    元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D全景漫游.zip元宇宙初探React+Three.js制作3D...

    react学习.txt

    react学习资料,react入门到实战,帮助你快速掌握react。

    React零基础自学手册.pdf

    #### 一、React.js简介与基本概念 - **React.js**:一种用于构建用户界面的JavaScript库,特别适用于构建单页应用(SPA)。 - **特点**:虚拟DOM、组件化设计、单向数据流。 #### 二、前端组件化 ##### Lesson 2 - ...

    React基础学习视频(上).zip

    React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中,把一切东西都...React.js 是一个新兴的 JavaScript 库,有很多经典的思想值得我们学习。 上篇包含:React 概述、React组件生命周期详解

Global site tag (gtag.js) - Google Analytics