feat: add example

Author: vnues

.eslintrc.json

@@ -130,6 +130,8 @@
     "no-lonely-if": "off",
     "no-param-reassign": "off",
     "no-alert": "off",
+    "no-plusplus": "off",
+    "no-await-in-loop": "off",
     "no-shadow": [
       "off",
       {

build/client/utils.js

@@ -5,22 +5,22 @@ const theme = path.join(__dirname, '../../src/client/style/antd.override.theme.l
 
 const config = require('../../config')
 
-exports.resolve = function(dir) {
+exports.resolve = function (dir) {
   return path.join(__dirname, '../../', dir)
 }
 
-exports.assetsPath = function(_path) {
+exports.assetsPath = function (_path) {
   const assetsSubDirectory = config.base.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.styleLoaders = function(options) {
+exports.styleLoaders = function (options) {
   const baseLoaders = [
     {
-      loader:'isomorphic-style-loader'
+      loader: 'isomorphic-style-loader'
     },
     {
-      loader: 'css-loader',
+      loader: 'css-loader'
     },
     { loader: 'postcss-loader' }
   ]
@@ -41,7 +41,7 @@ exports.styleLoaders = function(options) {
     include: /node_modules\/antd/,
     use: [
       {
-        loader:'isomorphic-style-loader'
+        loader: 'isomorphic-style-loader'
       },
       {
         loader: 'css-loader'
@@ -63,7 +63,14 @@ exports.styleLoaders = function(options) {
     test: /\.css$/,
     include: /node_modules/,
     use: [
-      options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
+      options.extract
+        ? {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: config.prod.assetsPublicPath
+            }
+          }
+        : 'style-loader',
       { loader: 'css-loader' }
     ]
   })

build/client/webpack.prod.conf.js

@@ -1,6 +1,6 @@
 const os = require('os')
 const path = require('path')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const TerserPlugin = require('terser-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
@@ -10,6 +10,8 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const utils = require('./utils')
 const config = require('../../config')
 const baseWebpackConfig = require('./webpack.base.conf')
+//生成 manifest 方便定位对应的资源文件
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
 
 module.exports = merge(baseWebpackConfig, {
   mode: 'production',
@@ -27,10 +29,12 @@ module.exports = merge(baseWebpackConfig, {
 
   plugins: [
     new MiniCssExtractPlugin({
-      path: config.base.assetsRoot,
-      publicPath: config.prod.assetsPublicPath,
       filename: utils.assetsPath('css/[name].[hash]p.css'),
       chunkFilename: utils.assetsPath('css/[id].[chunkhash]p.css')
+    }),
+    //生成 manifest 方便定位对应的资源文件
+    new WebpackManifestPlugin({
+      fileName: '../server/asset-manifest.json'
     })
   ],
 
@@ -44,12 +48,7 @@ module.exports = merge(baseWebpackConfig, {
         }
       }),
       new TerserPlugin({
-        sourceMap: true,
-        terserOptions: {
-          compress: {
-            drop_console: true
-          }
-        }
+        parallel: true
       }),
       new CompressionWebpackPlugin({
         compressionOptions: {

config/base.js

@@ -1,8 +1,8 @@
 var path = require('path')
 
 module.exports = {
-  title: 'react-ssr',
-  projectName: 'ninth-studio-mobile',
+  title: 'noov.js',
+  projectName: 'static',
   assetsPublicPath: 'http://localhost:8080/', // 设计到热更新的host jsonp客户端的地址
   assetsSubDirectory: 'static',
   assetsRoot: path.resolve(__dirname, '../dist')

package.json

@@ -114,7 +114,7 @@
     "less": "^4.1.1",
     "less-loader": "^8.1.1",
     "lint-staged": "^10.5.4",
-    "mini-css-extract-plugin": "^1.5.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "oock": "^1.0.13",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss-loader": "^5.2.0",
@@ -134,6 +134,7 @@
     "webpack-cli": "^4.6.0",
     "webpack-dev-middleware": "^4.1.0",
     "webpack-hot-middleware": "^2.25.0",
+    "webpack-manifest-plugin": "^3.1.1",
     "webpack-merge": "^5.7.3",
     "webpack-node-externals": "^3.0.0",
     "webpackbar": "^5.0.0-3"

src/client/main/layout.less

@@ -1,17 +1,8 @@
 body {
-  background-color: #f4f5f5;
+  background-color: #fff;
 }
 
-.layout-box {
-  max-width: 750px;
-  margin: 0 auto;
+h1 {
   text-align: center;
-  background: #fff;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 20px;
-
-  h1 {
-    margin-top: 20px;
-  }
+  margin-top: 20px;
 }

src/client/main/layout.tsx

@@ -9,12 +9,7 @@ interface IProps {}
 class Index extends React.PureComponent<Istate, IProps> {
   render() {
     const { children } = this.props
-    return (
-      <div className="layout-box">
-        <h1>ssr-layout</h1>
-        {children}
-      </div>
-    )
+    return <div className="layout-box">{children}</div>
   }
 }
 

src/client/main/route-config.tsx

@@ -23,13 +23,13 @@ function pageNotFound({ staticContext }: any) {
   )
 }
 try {
-  if (require.context) {
-    const context = require.context(`../modules`, true, /.*\/routes\.tsx?$/)
-    context.keys().forEach((key: string) => {
-      const route = context(key).default
-      routes = routes.concat(route)
-    })
-  }
+  // if (require.context) {
+  const context = require.context(`../modules`, true, /.*\/routes\.tsx?$/)
+  context.keys().forEach((key: string) => {
+    const route = context(key).default
+    routes = routes.concat(route)
+  })
+  // }
 } catch (err) {
   console.warn(err.message)
 }

src/client/modules/about/index.less

@@ -1,3 +1,88 @@
-.home {
-  background-color: aquamarine;
+html {
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #3b8070;
+  color: #3b8070;
+  text-decoration: none;
+  padding: 10px 30px;
+}
+
+.button--green:hover {
+  color: #fff;
+  background-color: #3b8070;
+}
+
+.button--grey {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #35495e;
+  color: #35495e;
+  text-decoration: none;
+  padding: 10px 30px;
+  margin-left: 15px;
+}
+
+.button--grey:hover {
+  color: #fff;
+  background-color: #35495e;
+}
+
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  // align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  display: block;
+  font-weight: 300;
+  font-size: 100px;
+  color: #35495e;
+  letter-spacing: 1px;
+}
+
+.subtitle {
+  font-weight: 300;
+  font-size: 42px;
+  color: #526488;
+  word-spacing: 5px;
+  padding-bottom: 15px;
+}
+
+.links {
+  padding-top: 15px;
+}
+
+.click-btn {
+  margin-top: 20px;
+}
+
+img {
+  width: 200px;
+  height: 100px;
+  margin-top: 120px;
 }

src/client/modules/about/index.tsx

@@ -2,21 +2,46 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import style from './index.less'
 import isConnect from '@/library/isConnect'
+import Logo from './logo.jpg'
 
 export const Home = () => {
   const handleClick = () => {
     alert('handleClick')
   }
 
   return (
-    <div className="home">
-      <h1>hello react-ssr</h1>
-      <button onClick={handleClick}>click me1的顶顶顶顶顶的</button>
-      {[22, 44, 55, 300, 100, 201].map((item: number) => (
-        <div key={item}>{item}</div>
-      ))}
-      <p>11</p>
-      <Link to="/history">404 page</Link>
+    <div className="container">
+      <div>
+        <img src={Logo} alt="" />
+        <h1 className="title">noov for ssr</h1>
+        <div className="links">
+          <a
+            href="https://art-design-ui.github.io/noov.js/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="button--green"
+          >
+            Documentation
+          </a>
+          <a
+            href="https://github.com/art-design-ui/noov.js"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="button--grey"
+          >
+            5 GitHub
+          </a>
+        </div>
+        <div
+          role="button"
+          tabIndex={0}
+          className="button--green click-btn"
+          onClick={handleClick}
+          onKeyDown={handleClick}
+        >
+          点一点
+        </div>
+      </div>
     </div>
   )
 }