refactor: optimize project structure

Author: pspgbhu

bin/www

@@ -2,31 +2,6 @@
 
 /* eslint-disable */
 
-require('babel-register')({
-  presets: [
-    ['env', {
-      targets: {
-        node: '8',
-      },
-    }],
-    'react',
-    'stage-2',
-  ],
-  plugins: [
-    'dynamic-import-node',
-    ['transform-runtime', {
-      polyfill: false,
-      regenerator: true,
-    }],
-    [
-      'babel-plugin-transform-require-ignore', {
-        extensions: ['.css', '.less', '.sass', '.scss'],
-      },
-    ],
-  ],
-  extensions: ['.jsx', '.js'],
-});
-
 /**
  * Module dependencies.
  */

build/webpack.prod.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { fetchInfo } from './actions';
+import { fetchInfo } from './store/action';
 
 class Author extends Component {
   componentWillMount() {

common/App.jsx client/app/App.jsx

@@ -1,7 +1,5 @@
 /**
- * 此文件只会被客户端所引用，为了保证前后端路由的一致性，
- * 请不要在此文件写入路由逻辑！
- * 请只在 /common/App.jsx 中编辑路由逻辑。
+ * 浏览器端入口文件
  */
 
 import React from 'react';
@@ -12,8 +10,8 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import logger from 'redux-logger';
 
-import reducer from '../common/reducers';
-import App from '../common/App';
+import reducer from '../store/reducer';
+import App from '../App';
 
 // 通过服务端注入的全局变量得到初始的 state
 const preloadedState = window.__INITIAL_STATE_;

common/Author.jsx client/app/Author.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import App from '../../common/App';
+import App from '../../App';
 
-export default ({ ctx, store, context }) => renderToString((
+export default ({ ctx, store, context }) => (
   <StaticRouter location={ctx.url} context={context}>
     <Provider store={store}>
       <App/>
     </Provider>
   </StaticRouter>
-));
+);

client/app/component/.gitkeep

@@ -0,0 +1,38 @@
+/**
+ * 请确保该文件是唯一的 Node.js 入口文件
+ *
+ * 支持 JSX, dynamic import
+ *
+ * 会自动忽略使用 require 引用的 css|less|sass|scss 等文件，
+ * 请勿使用 import 来引用上述样式文件
+ */
+
+require('babel-register')({
+  presets: [
+    ['env', {
+      targets: {
+        node: '8',
+      },
+    }],
+    'react',
+    'stage-2',
+  ],
+  plugins: [
+    'dynamic-import-node',
+    ['transform-runtime', {
+      polyfill: false,
+      regenerator: true,
+    }],
+    [
+      'babel-plugin-transform-require-ignore', {
+        extensions: ['.css', '.less', '.sass', '.scss'],
+      },
+    ],
+  ],
+  extensions: ['.jsx', '.js'],
+});
+
+module.exports = {
+  App: require('./app').default,
+  reducer: require('../../store/reducer').default,
+};

client/app/container/.gitkeep

@@ -4,7 +4,7 @@ import {
   FETCH_INFO_ERROR,
   FETCH_INFO_SUCCESS,
   FETCH_INFO_CACHED,
-} from '../actions';
+} from '../action';
 
 const authorInfo = (state = {}, action) => {
   switch (action.type) {

client/index.jsx client/app/entry/client.js

@@ -1,8 +1,9 @@
 const path = require('path');
-const devMode = process.env.NODE_ENV !== 'production';
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const autoprefixer = require('autoprefixer');
 
+const devMode = process.env.NODE_ENV !== 'production';
+
 const postcssOpts = {
   ident: 'postcss',
   plugins: () => [
@@ -23,7 +24,7 @@ const postcssOpts = {
 
 const config = {
   entry: {
-    app: path.resolve(__dirname, '../client/index.jsx'),
+    app: path.resolve(__dirname, '../app/entry/client.js'),
   },
 
   resolve: {
@@ -40,7 +41,7 @@ const config = {
           presets: [
             'es2015',
             'react',
-            'stage-2'
+            'stage-2',
           ],
           plugins: [
             'syntax-dynamic-import',

server/utils/render.jsx client/app/entry/server/app.js

@@ -14,7 +14,7 @@ const config = merge(baseConfig, {
   mode: 'development',
 
   output: {
-    path: path.resolve(__dirname, '../node_modules/.cache/rephic/public'),
+    path: path.resolve(__dirname, '../../node_modules/.cache/rephic/public'),
     filename: 'js/[name].js',
     publicPath: '/',
   },

client/app/entry/server/index.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const baseConfig = require('./webpack.base');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+
+const config = merge(baseConfig, {
+  mode: 'production',
+
+  output: {
+    path: path.resolve(__dirname, '../../server/public'),
+    filename: 'js/[name].js',
+    publicPath: '/',
+    chunkFilename: 'js/[name].js',
+  },
+
+  plugins: [
+    new UglifyJSPlugin(),
+  ],
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        common: {
+          name: 'vendors',
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'initial',
+        },
+      },
+    },
+  },
+
+});
+
+module.exports = config;

common/actions/index.js client/app/store/action/index.js

@@ -4,7 +4,7 @@ const notifier = require('node-notifier');
 const opn = require('opn');
 const chalk = require('chalk');
 
-const webpackDevConfig = require('./build/webpack.dev');
+const webpackDevConfig = require('./client/build/webpack.dev');
 
 gulp.task('default', ['watch']);
 

common/reducers/index.js client/app/store/reducer/index.js

@@ -6,7 +6,7 @@
   "site": "http://pspgbhu.me",
   "scripts": {
     "start": "cross-env NODE_ENV=production node bin/www",
-    "build": "cross-env NODE_ENV=production node build/build.js",
+    "build": "cross-env NODE_ENV=production node client/build/build.js",
     "prd": "pm2 start server/pm2.config.json bin/www",
     "dev": "npm run dev:client & npm run dev:server",
     "dev:server": "./node_modules/.bin/nodemon bin/www",

common/style/demo.scss client/app/style/demo.scss

@@ -1,14 +1,14 @@
 const { createStore, applyMiddleware } = require('redux');
 const thunk = require('redux-thunk').default;
-const renderStaticHtml = require('../../utils/render').default;
-const reducer = require('../../../common/reducers').default;
+const { renderToString } = require('react-dom/server');
+const { App, reducer } = require('../../../client/app/entry/server');
 
 module.exports = async (ctx, next) => {
   const context = {};
   // 在服务端创建 Redux Store
   const store = createStore(reducer, ctx.reactState || {}, applyMiddleware(thunk));
   // 生成 html 字符串
-  const content = renderStaticHtml({ ctx, store, context });
+  const content = renderToString(App({ ctx, store, context }));
   // 从 Store 中获取 State 对象
   const preloadedState = store.getState();