feat: update

Author: vnues

.babelrc

@@ -30,8 +30,8 @@
             "modules": false
           }
         ]
-      ],
-      "plugins": ["./build/babel/plugin/no-require-css"]
+      ]
+      // "plugins": ["./build/babel/plugin/no-require-css"]
     }
   }
 }

README.md

@@ -18,6 +18,17 @@ npm run dev
 页面的显示内容需要刷新一次才能看到。 后续继续优化，增加热更新。
 
 
-引用umi文档构建
 
-做成一个完整的项目
+## 待做
+
+- 修复构建的strat.js bug
+- server koa===>改造成ts
+- build server 改造成server
+- 支持 redux
+- server端引入ejs进行渲染返回 ===> 参考nuxt
+- css
+- 按需加载
+- 引用umi文档构建
+- 单元测试
+
+做成一个完整的项目

build/client/dev-server.js

@@ -19,6 +19,7 @@ const main = function() {
 
     const webpackDevMiddleware = devMiddleware(compiler, {
       // logLevel: 'silent',
+      index:true,
       publicPath: webpackConfig.output.publicPath
     })
 
@@ -28,6 +29,17 @@ const main = function() {
       path: '/__hmr'
     })
 
+      //设置跨域访问
+      app.all('*', function(req, res, next) {
+        res.header("Access-Control-Allow-Origin", "*");
+        res.header("Access-Control-Allow-Headers", "X-Requested-With");
+        res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
+        res.header("X-Powered-By",' 3.2.1')
+        res.header("Content-Type", "application/json;charset=utf-8");
+        next();
+      });
+      
+
     app.use(webpackDevMiddleware)
 
     app.use(webpackHotMiddleware)
@@ -36,6 +48,7 @@ const main = function() {
       res.sendStatus(200)
     })
 
+
     const staticPath = path.posix.join(config.dev.assetsPublicPath, config.base.assetsSubDirectory)
     app.use(staticPath, express.static('./static'))
 

build/client/utils.js

@@ -16,7 +16,9 @@ exports.assetsPath = function(_path) {
 
 exports.styleLoaders = function(options) {
   const baseLoaders = [
-    options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
+    {
+      loader:'isomorphic-style-loader'
+    },
     {
       loader: 'css-loader',
       // options: {
@@ -38,12 +40,13 @@ exports.styleLoaders = function(options) {
       }
     ]
   })
-
   output.push({
     test: /\.less$/,
     include: /node_modules\/antd/,
     use: [
-      options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
+      {
+        loader:'isomorphic-style-loader'
+      },
       {
         loader: 'css-loader'
       },

build/client/webpack.base.conf.js

@@ -93,16 +93,9 @@ module.exports = {
       inject: true
     })
   ],
-
     optimization: {
         splitChunks: {
             cacheGroups: {
-                styles: {
-                    name: 'styles',
-                    test: /\.less$/,
-                    chunks: 'all',
-                    enforce: true,
-                },
                 libs: { // 抽离第三方库
                     test: /node_modules/, // 指定是node_modules下的第三方包
                     chunks: 'initial',

build/client/webpack.dev.conf.js

@@ -21,7 +21,23 @@ module.exports = merge(baseWebpackConfig, {
   },
 
   module: {
-    rules: [...utils.styleLoaders({})]
+    // rules: [...utils.styleLoaders({})]
+    rules:[
+      {
+        test: /\.(le|c)ss$/,
+        use: [
+          'isomorphic-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2
+            }
+          },
+          'postcss-loader',
+          'less-loader'
+        ]
+      },
+    ]
   },
 
   // devtool: '#cheap-module-eval-source-map',

build/server/webpack.server.config.js

@@ -24,6 +24,20 @@ module.exports = {
   externals: [nodeExternals()],
   module: {
     rules: [
+      {
+        test: /\.(le|c)ss$/,
+        use: [
+          'isomorphic-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2
+            }
+          },
+          'postcss-loader',
+          'less-loader'
+        ]
+      },
       {
         test: /\.jsx?$/,
         loader: 'babel-loader',

build/start.js

@@ -46,10 +46,13 @@ const startNodeServer = () => {
   )
 }
 
+let flag=false
+
 // 控制台输出信息
 function print(data) {
   let str = data.toString()
-  if (str.indexOf(constantCode.SVRCODECOMPLETED) > -1) {
+  if (str.indexOf(constantCode.SVRCODECOMPLETED) > -1&&!flag) {
+    flag=true
     // 服务端代码编译完成
     startNodeServer() // 重启 node 服务
   } else {

config/base.js

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

package.json

@@ -67,6 +67,8 @@
 				"get-port": "^5.1.1",
 				"html-webpack-plugin": "^5.3.1",
 				"husky": "^6.0.0",
+				"isomorphic-style-loader": "^5.1.0",
+				"koa2-proxy-middleware": "0.0.4",
 				"less": "^4.1.1",
 				"less-loader": "^8.1.1",
 				"lint-staged": "^10.5.4",

src/client/main/index.tsx

@@ -11,17 +11,25 @@ import routeList from './route-config'
 import matchRoute from '../../common/match-route'
 // @ts-ignore
 import proConfig from '../../common/pro-config'
+  //  @ts-ignore
+import StyleContext from 'isomorphic-style-loader/StyleContext'
 
 function renderDom(routeList: any) {
+        //  @ts-ignore
+        const insertCss = (...styles) => {
+                const removeCss = styles.map(style => style._insertCss());//客户端执行，插入style
+                return () => removeCss.forEach(dispose => dispose());//组件卸载时 移除当前的 style 标签
+        }
         console.log('渲染index')
         // 渲染index
         // @ts-ignore
         const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
         console.log('routeList===>',routeList)
         renderMethod(
                 <BrowserRouter>
-                        <App routeList={routeList} />
-                </BrowserRouter>,
+                <StyleContext.Provider value={{ insertCss }}>
+                        <App routeList={routeList} /></StyleContext.Provider>
+        </BrowserRouter>,
                 document.getElementById('app'),
         )
 }

src/client/main/layout.tsx

@@ -3,7 +3,7 @@ import { Link, NavLink } from 'react-router-dom';
 import { withRouter } from 'react-router';
 import { hot } from 'react-hot-loader/root';
 
-import './layout.less';
+// import './layout.less';
 
 class Index extends React.Component {
   constructor(props: any) {

src/client/modules/home/index.less

@@ -0,0 +1,3 @@
+.home{
+  background-color: aquamarine;
+}

src/client/modules/home/index.tsx

@@ -1,21 +1,28 @@
 import React, { FC,useState } from 'react'
 import {Link} from 'react-router-dom'
+import  css from './index.less'
+// @ts-ignore
+// import withStyles from 'isomorphic-style-loader/withStyles'
+import useStyles from 'isomorphic-style-loader/useStyles'
+
+console.log('css',css)
 export const Home: FC<any> = (props: any) => {
   const [nums,setNums] = useState<number[]>([1,2,3,4,5,6])
+  useStyles(css)
   const handleClick = () => {
     window.alert('handleClick')
   }
 
   return (
-    <div>
+    <div className="home">
       <h1>hello react-ssr</h1>
-      <button onClick={handleClick}>click me</button>
+      <button onClick={handleClick}>click me1</button>
       {
-        [1,2,3,4,5,6,7,8,9,10].map((item:number)=><div key={item}>
+        [11,2,3,4,5,6,17,8,1231].map((item:number)=><div key={item}>
           {item}
         </div>)
       }
-      <Link to={'/history'}>click to 404 page</Link>
+      <Link to={'/history'}>clqick to2 404 page1</Link>
     </div>
   )
 }

src/client/modules/home/routes.tsx

@@ -13,11 +13,12 @@ function pageNotFound({staticContext}:any) {
 export default [
   {
     path: '/',
-    component: () => <Home />
+    component: () => <Home />,
+    exact:true
   },
   {
     path: '*',
     component: pageNotFound,
-    exact: true
+    // exact: true
   }
 ]

src/server/app/index.js

@@ -7,10 +7,23 @@ const port = proConfig.nodeServerPort || process.env.PORT;
 
 const app = new Koa();
 
-
+/* 代理配置 start */
+const proxy = require('koa2-proxy-middleware'); //引入代理模块
+const options = {
+    targets: {
+        // (.*) means anything
+        '/__hmr': {
+            target: 'http://localhost:8080',
+            changeOrigin: true,
+        },
+    }
+}
+app.use(
+    proxy(options)
+)
 // 设置可访问的静态资源
 // TODO 生产时打开
-// app.use(koaStatic('./dist/static'));
+app.use(koaStatic('./dist/static'));
 
 
 //ssr 中间件