feat: update config

Author: vnues

.eslintrc.json

@@ -128,7 +128,7 @@
     "no-multiple-empty-lines": "off",
     "no-new-wrappers": "error",
     "no-lonely-if": "off",
-    "no-param-reassign":"off",
+    "no-param-reassign": "off",
     "no-shadow": [
       "off",
       {
@@ -164,7 +164,7 @@
     "spaced-comment": ["error", "always", { "markers": ["/"] }],
     "use-isnan": "error",
     "valid-typeof": "off",
-    "prefer-destructuring":"off",
+    "prefer-destructuring": "off",
     "react/jsx-no-target-blank": [
       "error",
       {
@@ -237,18 +237,18 @@
         "ecmaVersion": 12,
         "sourceType": "module"
       }
-    },
-    {
-      // enable the rule specifically for TypeScript files
-      "files": ["*.js", "*.ts"],
-      "rules": {
-        "@typescript-eslint/explicit-module-boundary-types": [
-          "error",
-          {
-            "allowArgumentsExplicitlyTypedAsAny":true
-          }
-        ]
-      }
     }
+    // {
+    //   // enable the rule specifically for TypeScript files
+    //   "files": ["*.js", "*.ts"],
+    //   "rules": {
+    //     "@typescript-eslint/explicit-module-boundary-types": [
+    //       "error",
+    //       {
+    //         "allowArgumentsExplicitlyTypedAsAny":true
+    //       }
+    //     ]
+    //   }
+    // }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# react ssr 开发体验初步升级
+# noov.js
 
 服务运行
 
@@ -7,28 +7,10 @@ npm i
 npm run dev
 ```
 
-## 升级内容
-
-- 前端代码的实时构建
-- 服务端所需代码的实时编译
-- http 服务的自动重启
-
-## 缺陷
-
-页面的显示内容需要刷新一次才能看到。 后续继续优化，增加热更新。
-
 ## 待做
 
-- 修复构建的 strat.js bug
-- server koa===>改造成 ts
-- build server 改造成 server
-- 支持 redux
-- server 端引入 ejs 进行渲染返回 ===> 参考 nuxt
-- css
-- 按需加载
-- 引用 umi 文档构建
-- 单元测试
-- 8080 所有路由 获取 index 文件然后返回
-- 项目还得支持 sourceMap 的引入
-
-做成一个完整的项目
+- [ ] 文档补充
+- [ ] 单元测试
+- [ ] 看看 nuxt 如何做 ssr
+- [ ] start.js 优化
+- [ ] ts 类型完善

build/client/dev-server.js

@@ -3,13 +3,13 @@ const express = require('express')
 const webpack = require('webpack')
 const devMiddleware = require('webpack-dev-middleware')
 const hotMiddleware = require('webpack-hot-middleware')
-const proConfig = require('../../config/pro-config')
 const webpackConfig = require('./webpack.dev.conf')
+const proConfig = require('../../config/pro-config')
 const config = require('../../config')
 const port = config.dev.port
-
+const constant = require('../../config/constant')
 const getPort = require('get-port')
-
+const chalk = require('chalk')
 const main = function () {
   getPort({
     port: getPort.makeRange(port, port + 100)
@@ -53,7 +53,12 @@ const main = function () {
 
     console.log('> Starting dev server...')
     webpackDevMiddleware.waitUntilValid(() => {
-      console.log(`> Listening at ${config.dev.host}:${proConfig.nodeServerPort} \n`)
+      console.log(`> client Listening at ${config.dev.host}:${newPort} \n`)
+      console.log(
+        chalk.green(
+          `> server Listening at ${config.dev.host}:${proConfig.nodeServerPort} \n`
+        )
+      )
     })
     app.listen(newPort)
   })

build/client/webpack.base.conf.js

@@ -71,7 +71,7 @@ module.exports = {
   },
 
   plugins: [
-    new FriendlyErrorsWebpackPlugin(),
+    // new FriendlyErrorsWebpackPlugin(),
     new ForkTsCheckerWebpackPlugin(),
     new ESLintPlugin({
       fix: true

build/client/webpack.dev.conf.js

@@ -1,5 +1,5 @@
 const webpack = require('webpack')
-const {merge} = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 
@@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
     main: ['webpack-hot-middleware/client?path=__hmr', './src/client/main/index.tsx']
   },
   module: {
-    rules:[
+    rules: [
       {
         test: /\.(le|c)ss$/,
         use: [
@@ -30,13 +30,13 @@ module.exports = merge(baseWebpackConfig, {
           'postcss-loader',
           'less-loader'
         ]
-      },
+      }
     ]
   },
   devtool: 'cheap-source-map',
   plugins: [
     new FriendlyErrorsWebpackPlugin(),
-    new webpack.HotModuleReplacementPlugin(), 
+    new webpack.HotModuleReplacementPlugin(),
     new BundleAnalyzerPlugin.BundleAnalyzerPlugin({
       openAnalyzer: false,
       analyzerPort: 'auto'

build/start.js

@@ -19,17 +19,19 @@ const localHostIp = getIp()
 
 log(chalk.green('servers starting....'))
 
-// 服务端代码监控和构建进程
-const svrCodeWatchProcess = spawn('npm', ['run', 'server-dev:build'], {
-  shell: process.platform === 'win32'
-})
-
 // 前端代码构建 服务进程
 const feCodeWatchProcess = spawn('npm', ['run', 'client:dev', localHostIp], {
   stdio: 'inherit',
   shell: process.platform === 'win32'
 })
 
+// 服务端代码监控和构建进程
+let svrCodeWatchProcess = spawn('npm', ['run', 'server-dev:build'], {
+  shell: process.platform === 'win32'
+})
+// 监听服务端代码构建服务的对外输出  stdout 事件
+svrCodeWatchProcess.stdout.on('data', print)
+
 // node 服务进程
 let nodeServerProcess = null
 // 启动 node 服务
@@ -54,9 +56,6 @@ function print(data) {
   }
 }
 
-// 监听服务端代码构建服务的对外输出  stdout 事件
-svrCodeWatchProcess.stdout.on('data', print)
-
 // 杀掉子进程
 const killChild = () => {
   svrCodeWatchProcess && svrCodeWatchProcess.kill()

config/constant.js

@@ -1,5 +1,6 @@
 // 用于开发环境的构建过程中的常量
 
 module.exports = {
-    SVRCODECOMPLETED:'编译完成...'// 服务端代码编译完成
-}
+  SVRCODECOMPLETED: '编译完成...', // 服务端代码编译完成
+  CLIENTCOMPILEDONE: '客户端编译完成...'
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "now",
+  "name": "noov",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

src/server/app/index.ts

@@ -32,6 +32,6 @@ app.use(koaStatic('./dist/static'))
 app.use(ssrMiddleware)
 
 // 启动服务
-app.listen(port)
-
-console.log('server is start .', `http://localhost:${port}`)
+app.listen(port, () => {
+  console.log('server is start .', `http://localhost:${port}`)
+})