fix: 服务端支持处理图片等静态资源

Author: vnues

.eslintrc.json

@@ -189,6 +189,7 @@
         "ignoreStateless": true
       }
     ],
+    "react/sort-comp": "off",
     "react/no-this-in-sfc": "error",
     "react/no-unsafe": [
       "error",

build/server/webpack.server.config.js

@@ -43,14 +43,27 @@ module.exports = {
         ]
       },
       {
-        test: /.(png|jpg|gif)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            emitFile: false,
-            name: isProd ? 'img/[name].[hash:8].[ext]' : 'img/[name].[ext]',
-            publicPath: isProd ? '/' : `http://${__LOCAL_IP__}:${proConfig.wdsPort}`
-          }
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       }
     ]
@@ -64,7 +77,7 @@ module.exports = {
     new WebpackBar({
       name: 'server',
       color: 'orange'
-    }),
+    })
   ],
   resolve: {
     extensions: ['.js', '.ts', '.tsx', '.json'],

src/client/components/container/index.tsx

@@ -5,8 +5,8 @@ let self: any = null
 
 const popStateCallback = () => {
   // 使用popStateFn保存函数防止addEventListener重复注册
-  if (self && self.getInitialProps) {
-    self.getInitialProps()
+  if (self && self.asyncData) {
+    self.asyncData()
   }
 }
 
@@ -29,20 +29,18 @@ interface IState {
 export default (SourceComponent: any) =>
   class HoComponent extends React.PureComponent<IProps, IState> {
     state = {
-      initialData: {},
-      canClientFetch: false, // 浏览器端是否需要请求数据
       page: {
         title: '',
         keywords: '',
         description: ''
-      }
+      },
+      initialData: {},
+      canClientFetch: false // 浏览器端是否需要请求数据
     }
 
     // 转接子组件的预取方法，服务端会调用这个方法来做数据预取
-    static async getInitialProps(ctx: any) {
-      return SourceComponent.getInitialProps
-        ? await SourceComponent.getInitialProps(ctx)
-        : {}
+    static async asyncData(ctx: any) {
+      return SourceComponent.asyncData ? await SourceComponent.asyncData(ctx) : {}
     }
 
     async componentDidMount() {
@@ -53,18 +51,18 @@ export default (SourceComponent: any) =>
       const canClientFetch = history && history.action === 'PUSH' // 路由跳转的时候可以异步请求数据
       if (canClientFetch) {
         // 如果是 history PUSH 操作 则更新数据
-        await this.getInitialProps()
+        await this.asyncData()
       }
     }
 
-    // 约定所有页面组件内的数据预取方法为getInitialProps,用于双端调用
-    async getInitialProps() {
-      // ssr首次进入页面以及csr/ssr切换路由时才调用组件的getInitialProps方法
+    // 约定所有页面组件内的数据预取方法为asyncData,用于双端调用
+    async asyncData() {
+      // ssr首次进入页面以及csr/ssr切换路由时才调用组件的asyncData方法
       const store = window.__STORE__ // 从全局得到 store
       // 兼容不使用 redux 的页面
       // 通过props.getInitialData判断
-      const res = SourceComponent.getInitialProps
-        ? await SourceComponent.getInitialProps({ store })
+      const res = SourceComponent.asyncData
+        ? await SourceComponent.asyncData({ store })
         : {}
       // 处理页面 title 显示
       const { tdk } = res.page || {}

src/client/modules/home/index.tsx

@@ -47,7 +47,7 @@ export const Home = () => {
 }
 // ! 约定 服务端会调用这个方法  ===> 相当于是生命周期
 // 这一块可能会设计到把redux的操作
-Home.getInitialProps = ({ store }: any) => {
+Home.asyncData = ({ store }: any) => {
   // TODO 在这个生命周期调用getInitialData
   store.dispatch.home.getInitialData()
 }

src/server/middlewares/genHtml.tsx

@@ -29,7 +29,7 @@ export default async function genHtml(
   let fetchDataFn
   let fetchResult = {}
   if (targetRoute) {
-    fetchDataFn = targetRoute.component ? targetRoute.component.getInitialProps : null
+    fetchDataFn = targetRoute.component ? targetRoute.component.asyncData : null
     if (fetchDataFn) {
       // 更新 state
       fetchResult = await fetchDataFn({ store })

tests/components/container.spec.jsx

@@ -26,7 +26,7 @@ describe('test AsyncBundle component', () => {
     const nameElement = screen.getByText('vnues')
     expect(nameElement.tagName).toBe('P')
   })
-  it('should return the correct default when client render call getInitialProps', async () => {
+  it('should return the correct default when client render call asyncData', async () => {
     // 前端模拟webpack替换_SERVER__
     window.__SERVER__ = null
     function SourceComponent(props) {
@@ -41,7 +41,7 @@ describe('test AsyncBundle component', () => {
       )
     }
     const user = { name: 'Tom', age: 24 }
-    SourceComponent.getInitialProps = async function () {
+    SourceComponent.asyncData = async function () {
       function getUser() {
         return new Promise(resolve => {
           setTimeout(() => {
@@ -67,15 +67,15 @@ describe('test AsyncBundle component', () => {
       action: 'PUSH'
     }
     render(<ContainerComponent history={history} />)
-    const { data } = await ContainerComponent.getInitialProps()
+    const { data } = await ContainerComponent.asyncData()
     expect(data).toEqual(user)
     expect(await screen.findByText('Tom')).toBeInTheDocument()
     expect(await screen.findByText('24')).toBeInTheDocument()
     // 放在这里执行 有了await回调的效果
     expect(document.title).toBe('首页')
   })
 
-  it('should return the correct default when server render call getInitialProps', async () => {
+  it('should return the correct default when server render call asyncData', async () => {
     // 前端模拟webpack替换_SERVER__
     window.__SERVER__ = {}
     function SourceComponent(props) {