一. react服務(wù)端渲染實(shí)現(xiàn)流程
1、輸入url網(wǎng)址向服務(wù)器請求頁面
2搬瑰、服務(wù)器接收請求款票,從數(shù)據(jù)庫獲取數(shù)據(jù)與靜態(tài)資源,渲染到html中返回
- 服務(wù)器端需要安裝react相關(guān)來將react組件轉(zhuǎn)為html字符串
- 服務(wù)器端需要安裝webpack使資源文件可以引入node環(huán)境中
3泽论、前段獲取html后渲染到瀏覽器艾少,請求html中靜態(tài)資源后進(jìn)行二次渲染
4、服務(wù)端渲染組件部分js需要單獨(dú)放在一個目錄下翼悴,通過一個出口提供模板字符串缚够,webpack只打包該目錄下的內(nèi)容
output的libraryTarget屬性決定了輸出文件被其他目錄的引用方式(commonjs2可以通過require引入,具體看官方文檔)
二. 環(huán)境搭建
1鹦赎、服務(wù)器環(huán)境express
2谍椅、webpack下配置ES6環(huán)境與資源加載
- 配置babel:.babelrc配置文件實(shí)現(xiàn)ES6環(huán)境支持
- 配置webpack: webpack.config.js文件,配置css style babel的loader安裝
以及babel-core babel-preset-es2015 babel-preset-react等核心模塊安裝
3古话、loader是按照順序?qū)ntry進(jìn)行執(zhí)行的毯辅,如果loader之間存在沖突會報錯
babel已經(jīng)包含jsx-loader所需模塊,jsx由于無法解析import導(dǎo)致執(zhí)行webpack報錯