网站代码架构记录1.0

项目地址点击这里

所需技术

react、es6、webpack、babel、react-redux、redux、react-router、nodejs...

说明

参考的一位大神的项目架构+自己的修改。许多还是不够完善，欢迎多多指点。

也是在上面开发了一段时间才整理分享出，感觉分工还不是很明确，还是有许多需要晚上的地方。

先记录着。

欢迎学习交流：
Node.js技术交流群：209530601
React技术栈：398240621

整体说明

一个网站的应用，服务器开发阶段分为三个：发送页面服务器，API服务器，资源服务器。生产环境服务器分为页面服务器和API服务器。

项目架构如图

OK，这里简单说明下

bin:启动目录

draft：理解为草稿文件夹吧

record：网站开发的过程记录

src：源码文件

actions：前端文件的action
api：后端API处理
components ...都是redux相关的配置了

static：资源文件，

upload:上传来的文件

webpack：webpack的配置文件

下面一个一个的介绍

同构配置文件：webpack-isomorphic-tools.js

var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');

var config = {
    assets: {
        images: {extensions: ['png']},style_modules: {
            extensions: ['css','scss'],filter: function (module,regex,options,log) {
                if (options.development) {
                    return WebpackIsomorphicToolsPlugin.style_loader_filter(module,log);
                } else {
                    return regex.test(module.name);
                }
            },path: function (module,log) {
                if (options.development) {
                    return WebpackIsomorphicToolsPlugin.style_loader_path_extractor(module,log);
                } else {
                    return module.name;
                }
            },parser: function (module,log) {
                if (options.development) {
                    return WebpackIsomorphicToolsPlugin.css_modules_loader_parser(module,log);
                } else {
                    return module.source;
                }
            }
        }
    }
};

module.exports = config;

因为需要用到Universal渲染，所以需要同构一下require的能力，这里配置很简单，但是这里对options.development判断了环境

如果是开发环境，则返回适用于style-loader,css-loader的返回值，如果是在生产环境中，则提取单独的样式文件，所以就让他直接返回默认值。

项目配置文件：src/config.js

module.exports = {
    host:process.env.HOST || 'localhost',port:process.env.PORT || (process.env.NODE_ENV === 'production'?8080:3000),apiHost:process.env.APIHOST || 'localhost',apiPort:process.env.APIPORT || '3030',app:{
        title:'Neal\'s personal tech-website',description:'Neal\' s personal website about technology',head:{
            titleTemplate:'Neal\'s personal website',Meta:[
                {
                    name:'description',content:'Neal\' s personal website about technology'
                },{charset:'utf-8'}
            ]
        }
    }
};

对于端口什么的经常变动就经常使用的变量，我们这里单独的提取出来了。并且配置了默认的HTML页面header信息

开发服务器

开发环境下的webpack配置：dev.cofig.js

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');

var projectRootPath = path.resolve(__dirname,'../');
var assetsPath = path.resolve(projectRootPath,'./static/dist');

var config = require('../src/config');

module.exports = {
    devtool: 'cheap-eval-source-map',context: projectRootPath,entry: [
        'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr','./src/client'
    ],output: {
        path: assetsPath,filename: '[name]-[hash].js',chunkFilename: '[name]-[chunkhash].js',publicPath: 'http://' + config.host + ':' + (config.port + 1) + '/dist/'
    },progress: true,plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.DefinePlugin({
            __SERVER__: false
        }),new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools')).development(),new webpack.ProvidePlugin({
            $:'jquery',jQuery:'jquery',"window.jQuery":"jquery"
        })
    ],module: {
        loaders: [
            {
                test: /\.js$/,loader: 'babel',exclude: /node_modules/,query: {
                    presets: ['react-hmre']
                }
            },{ test: /\.(jpeg|jpg|png|gif)$/,loader: 'url-loader?limit=10240' },{
                test: /\.css$/,loaders: [
                    'style','css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]','postcss'
                ]
            },{
                test: /\.scss$/,'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]','postcss','sass'
                ]
            }
        ]
    },postcss: [autoprefixer({ browsers: ['last 2 versions'] })]
};

这里的devtool选用cheap-module-eval-source-map,毕竟可以在代码映射的时候点击直接跳转到源码。

别的一般都是常规配置。

资源服务器 webpack-dev-server.js

var Express = require('express');

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpackConfig = require('./dev.config');

var app = new Express();
var port = require('../src/config').port + 1;

var compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler,{noInfo: true,publicPath: webpackConfig.output.publicPath}));
app.use(webpackHotMiddleware(compiler));

app.listen(port,(error) => {
    if (error) {
        console.error(error)
    } else {
        console.info(`==>

React技术栈+node的项目架构1.0初探