Skip to content

Commit c61f3b4

Browse files
vnuesvnues
committed
feat: update
1 parent 30f37e5 commit c61f3b4

File tree

10 files changed

+89
-93
lines changed

10 files changed

+89
-93
lines changed

‎build/client/dev-server.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@ const port = config.dev.port
1010

1111
const getPort = require('get-port')
1212

13-
const main = function() {
13+
const main = function () {
1414
getPort({
1515
port: getPort.makeRange(port, port + 100)
16-
}).then(function(newPort) {
16+
}).then(function (newPort) {
1717
const app = express()
1818
const compiler = webpack(webpackConfig)
1919

2020
const webpackDevMiddleware = devMiddleware(compiler, {
2121
// logLevel: 'silent',
22-
index:true,
22+
index: true,
2323
publicPath: webpackConfig.output.publicPath
2424
})
2525

@@ -29,27 +29,28 @@ const main = function() {
2929
path: '/__hmr'
3030
})
3131

32+
3233
//设置跨域访问
3334
app.all('*', function(req, res, next) {
3435
res.header("Access-Control-Allow-Origin", "*");
35-
res.header("Access-Control-Allow-Headers", "X-Requested-With");
36-
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
37-
res.header("X-Powered-By",' 3.2.1')
38-
res.header("Content-Type", "application/json;charset=utf-8");
36+
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
37+
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
38+
// res.header("X-Powered-By",' 3.2.1')
39+
// res.header("Content-Type", "application/json;charset=utf-8");
3940
next();
4041
});
41-
4242

4343
app.use(webpackDevMiddleware)
4444

4545
app.use(webpackHotMiddleware)
46-
47-
app.use('/ping', function(req, res) {
46+
app.use('/ping', function (req, res) {
4847
res.sendStatus(200)
4948
})
5049

51-
52-
const staticPath = path.posix.join(config.dev.assetsPublicPath, config.base.assetsSubDirectory)
50+
const staticPath = path.posix.join(
51+
config.dev.assetsPublicPath,
52+
config.base.assetsSubDirectory
53+
)
5354
app.use(staticPath, express.static('./static'))
5455

5556
console.log('> Starting dev server...')

‎build/client/utils.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,6 @@ exports.styleLoaders = function(options) {
2121
},
2222
{
2323
loader: 'css-loader',
24-
// options: {
25-
// modules: true,
26-
// localIdentName: '[path]-[local]-[hash:base64:5]'
27-
// }
2824
},
2925
{ loader: 'postcss-loader' }
3026
]
@@ -63,14 +59,14 @@ exports.styleLoaders = function(options) {
6359
]
6460
})
6561

66-
output.push({
67-
test: /\.css$/,
68-
include: /node_modules/,
69-
use: [
70-
options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
71-
{ loader: 'css-loader' }
72-
]
73-
})
62+
// output.push({
63+
// test: /\.css$/,
64+
// include: /node_modules/,
65+
// use: [
66+
// options.extract ? MiniCssExtractPlugin.loader : 'style-loader',
67+
// { loader: 'css-loader' }
68+
// ]
69+
// })
7470

7571
return output
7672
}

‎build/client/webpack.dev.conf.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = merge(baseWebpackConfig, {
3030
{
3131
loader: 'css-loader',
3232
options: {
33-
importLoaders: 2
33+
importLoaders: 1
3434
}
3535
},
3636
'postcss-loader',
@@ -44,7 +44,7 @@ module.exports = merge(baseWebpackConfig, {
4444

4545
plugins: [
4646
new FriendlyErrorsWebpackPlugin(),
47-
new webpack.HotModuleReplacementPlugin(),
47+
new webpack.HotModuleReplacementPlugin(), // 热更新这块标记下
4848
// new HtmlWebpackVariablePlugin(process.env.VARS ? { map: process.env.VARS } : {}),
4949
new BundleAnalyzerPlugin.BundleAnalyzerPlugin({
5050
openAnalyzer: false,

‎index.html

Whitespace-only changes.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"@typescript-eslint/parser": "^4.22.0",
5555
"babel-loader": "^8.2.2",
5656
"clean-webpack-plugin": "^4.0.0-alpha.0",
57-
"css-loader": "^5.2.4",
57+
"css-loader": "^3.4.0",
5858
"eslint": "^7.25.0",
5959
"eslint-loader": "^4.0.2",
6060
"eslint-plugin-prefer-arrow": "^1.2.3",

‎src/client/main/index.tsx

+50-51
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,61 @@ import routeList from './route-config'
1111
import matchRoute from '../../common/match-route'
1212
// @ts-ignore
1313
import proConfig from '../../common/pro-config'
14-
// @ts-ignore
14+
// @ts-ignore
1515
import StyleContext from 'isomorphic-style-loader/StyleContext'
1616

1717
function renderDom(routeList: any) {
18-
// @ts-ignore
19-
const insertCss = (...styles) => {
20-
const removeCss = styles.map(style => style._insertCss());//客户端执行，插入style
21-
return () => removeCss.forEach(dispose => dispose());//组件卸载时 移除当前的 style 标签
22-
}
23-
console.log('渲染index')
24-
// 渲染index
25-
// @ts-ignore
26-
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
27-
console.log('routeList===>',routeList)
28-
renderMethod(
29-
<BrowserRouter>
30-
<StyleContext.Provider value={{ insertCss }}>
31-
<App routeList={routeList} /></StyleContext.Provider>
32-
</BrowserRouter>,
33-
document.getElementById('app'),
34-
)
18+
// @ts-ignore
19+
const insertCss = (...styles) => {
20+
const removeCss = styles.map(style => style._insertCss()) // 客户端执行，插入style
21+
return () => removeCss.forEach(dispose => dispose()) // 组件卸载时 移除当前的 style 标签
22+
}
23+
console.log('渲染index')
24+
// 渲染index
25+
// @ts-ignore
26+
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate
27+
console.log('routeList===>', routeList)
28+
renderMethod(
29+
<BrowserRouter>
30+
<StyleContext.Provider value={{ insertCss }}>
31+
<App routeList={routeList} />
32+
</StyleContext.Provider>
33+
</BrowserRouter>,
34+
document.getElementById('app')
35+
)
3536
}
3637

3738
function clientRender(routeList: any) {
39+
if (document.getElementById('ssrTextInitData')) {
40+
// @ts-ignore
41+
let value = document.getElementById('ssrTextInitData').value
42+
let initialData = JSON.parse(value && value.replace(/\\n/g, ''))
43+
// @ts-ignore
44+
window.__INITIAL_DATA__ = initialData || {}
45+
}
3846

39-
if (document.getElementById('ssrTextInitData')) {
40-
// @ts-ignore
41-
let value = document.getElementById('ssrTextInitData').value
42-
let initialData = JSON.parse(value && value.replace(/\\n/g, ''))
43-
// @ts-ignore
44-
window.__INITIAL_DATA__ = initialData || {}
45-
}
46-
47-
48-
//查找路由
49-
let matchResult = matchRoute(document.location.pathname, routeList)
50-
console.log('matchResult',matchResult)
51-
let { targetRoute } = matchResult
52-
console.log('targetRoute===>', targetRoute)
53-
if (targetRoute) {
54-
//预加载 等待异步脚本加载完成
55-
// if (targetRoute.component[proConfig.asyncComponentKey]) {
56-
// targetRoute
57-
// .component()
58-
// .then((res: any) => {
59-
// //异步组件加载完成后再渲染页面
60-
// console.log('异步组件加载完成.')
61-
//设置已加载完的组件，否则需要重新请求
62-
// targetRoute.component = res ? res.default : null
63-
renderDom(routeList)
64-
// })
65-
// }
66-
} else {
67-
console.log('renderDom==>', renderDom)
68-
renderDom(routeList)
69-
}
47+
//查找路由
48+
let matchResult = matchRoute(document.location.pathname, routeList)
49+
console.log('matchResult', matchResult)
50+
let { targetRoute } = matchResult
51+
console.log('targetRoute===>', targetRoute)
52+
if (targetRoute) {
53+
//预加载 等待异步脚本加载完成
54+
// if (targetRoute.component[proConfig.asyncComponentKey]) {
55+
// targetRoute
56+
// .component()
57+
// .then((res: any) => {
58+
// //异步组件加载完成后再渲染页面
59+
// console.log('异步组件加载完成.')
60+
//设置已加载完的组件，否则需要重新请求
61+
// targetRoute.component = res ? res.default : null
62+
renderDom(routeList)
63+
// })
64+
// }
65+
} else {
66+
console.log('renderDom==>', renderDom)
67+
renderDom(routeList)
68+
}
7069
}
7170

7271
//渲染入口
@@ -75,6 +74,6 @@ clientRender(routeList)
7574
//开发环境才会开启
7675
// @ts-ignore
7776
if (process.env.NODE_ENV === 'development' && module.hot) {
78-
// @ts-ignore
79-
module.hot.accept()
77+
// @ts-ignore
78+
module.hot.accept()
8079
}

‎src/client/main/layout.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { Link, NavLink } from 'react-router-dom';
33
import { withRouter } from 'react-router';
44
import { hot } from 'react-hot-loader/root';
55

6-
// import './layout.less';
6+
import css from './layout.less';
7+
8+
import withStyles from 'isomorphic-style-loader/withStyles'
79

810
class Index extends React.Component {
911
constructor(props: any) {
@@ -19,4 +21,4 @@ class Index extends React.Component {
1921
}
2022
}
2123

22-
export default hot(Index);
24+
export default withStyles(css)(hot(Index));

‎src/client/modules/home/index.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,25 @@ import React, { FC,useState } from 'react'
22
import {Link} from 'react-router-dom'
33
import css from './index.less'
44
// @ts-ignore
5-
// import withStyles from 'isomorphic-style-loader/withStyles'
6-
import useStyles from 'isomorphic-style-loader/useStyles'
5+
import withStyles from 'isomorphic-style-loader/withStyles'
76

87
console.log('css',css)
98
export const Home: FC<any> = (props: any) => {
109
const [nums,setNums] = useState<number[]>([1,2,3,4,5,6])
11-
useStyles(css)
1210
const handleClick = () => {
1311
window.alert('handleClick')
1412
}
15-
1613
return (
1714
<div className="home">
1815
<h1>hello react-ssr</h1>
19-
<button onClick={handleClick}>click me1</button>
16+
<button onClick={handleClick}>click me1的顶顶顶顶顶的</button>
2017
{
21-
[11,2,3,4,5,6,17,8,1231].map((item:number)=><div key={item}>
18+
[111,2,3,4,5,6111,17,338,1232221].map((item:number)=><div key={item}>
2219
{item}
2320
</div>)
2421
}
25-
<Link to={'/history'}>clqick to2 404 page1</Link>
22+
<Link to={'/history'}>2222clqick to2 404 page12为</Link>
2623
</div>
2724
)
2825
}
29-
export default Home
26+
export default withStyles(css)(Home)

‎src/common/pro-config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33

44
module.exports = {
5-
__IS_SSR__:true,//是否为 ssr 模式
6-
wdsPort:9002,//wds 服务的运行端口
7-
nodeServerPort:9001,//node server 的监听端口
8-
asyncComponentKey:'__IS_ASYNC_COMP_FLAG__'//标志组件是否是按需加载 turn | false
5+
__IS_SSR__:true, //是否为 ssr 模式
6+
wdsPort:9002, //wds 服务的运行端口
7+
nodeServerPort:9001, //node server 的监听端口
8+
asyncComponentKey:'__IS_ASYNC_COMP_FLAG__' //标志组件是否是按需加载 turn | false
99
}

‎src/server/utils/assets.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ module.exports = function () {
1717
};
1818
if (!__IS_PROD__) {//开发环境
1919
assets.js.push(`<script type="text/javascript" src="${devHost}/libs.js"></script>`);
20-
assets.js.push(`<script type="text/javascript" src="${devHost}/main.js"></script>`);
20+
assets.js.push(`<script type="text/javascript" src="${devHost}/main.js"></script>`); // 写死的
21+
// 这样就说明有缓存 可能没出来效果
2122
assets.js.push(`<script type="text/javascript" src="${devHost}/styles.js"></script>`);
2223
// assets.css.push(`<link rel="stylesheet" type="text/css" href="${devHost}/styles.css" />`);
2324
} else {

0 commit comments

Comments
 (0)