个人中心
gpt4 book ai didi

javascript - 在服务器上呈现页面时如何包含样式？

转载 作者：行者123 更新时间：2023-11-27 22:51:12 25 4
gpt4 key购买 nike

我在实现服务器端呈现时遇到问题。我正在使用 react + typescript 前端和后端，用 node.js 和 typescript 编写。当它第一次从服务器发送时(在 js 加载之前)，我找不到在我的页面中包含样式的方法。我尝试过的是将所有样式捆绑到单个 main.css 文件中，然后在从服务器发送的 html 文件中使用链接标记，但在这种情况下，加载 css 所花费的时间与加载 js 所花费的时间一样多(什么是SSR 的目的在这里？)。我也试图避免样式化我的组件内联。任何帮助将不胜感激。在这里，我将分享我当前的一些代码，希望它能以某种方式提供帮助。

App Component <- optimally i would like to see styled app as soon as browser reads .html file (i guess that's 
the purpose of SSR)


export default class App extends React.Component<State, Props> {
state: State = {

}

render = () => {
    return (
        <div className="app">
            APP COMPONENT !!!
        </div>
    )
  }
}

客户端代码入口(ClientEntry.tsx)

import React from "react";
import ReactDOM from "react-dom";
import App from "../shared/containers/App";
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("app")
);

网络包配置

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const autoprefixer = require("autoprefixer");
const WebpackShellPlugin = require('webpack-shell-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const clientConfig = {
  stats:'errors-only',
  entry: "./src/client/ClientEntry.tsx",
  output: {
    path: __dirname,
    filename: "./build/bundle.js"
  },
  devtool: "cheap-module-source-map",
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: "file-loader",
        options: {
          name: "build/media/[name].[ext]",
          publicPath: url => url.replace(/build/, "")
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "css-loader",
              options: { importLoaders: 1 }
            },
            {
              loader: "postcss-loader",
              options: { plugins: [autoprefixer()] }
            }
          ]
        })
      },
      {
        test: [/tsx?$/],
        exclude: /(node_modules)/,
        loader: "ts-loader",
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "build/css/[name].css"
    }),
    new WebpackShellPlugin({
      onBuildEnd: ['nodemon build/server.js']
    })
  ]
};

const serverConfig = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ terserOptions: { mangle: false } })],
  },
  stats:'errors-only',
  entry: "./src/server/index.tsx",
  target: "node",
  output: {
    path: __dirname,
    filename: "./build/server.js",
    libraryTarget: "commonjs2"
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: "file-loader",
        options: {
          name: "build/media/[name].[ext]",
          publicPath: url => url.replace(/build/, ""),
          emit: false
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader/locals"
          }
        ]
      },
      {
        test: [/tsx?$/],
        exclude: /(node_modules)/,
        loader: "ts-loader",
      }
    ]
  }
};

module.exports = [clientConfig, serverConfig];

index.tsx的一部分(express主文件)

server.get('/*', (req, res) => {
  const body = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.send(
    html({
      body
    })
  );
})

以及转换为html的函数

const html = ({ body }: { body: string }) => `
  <!DOCTYPE html>
  <title> my app</title>
  <html>
    <head>
      <link rel="stylesheet" href="/css/main.css">
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
    </body>
    <script src="/bundle.js" defer></script>
  </html>
`;

export default html;

最佳答案

我假设你正在使用 express，它有一个内置的方法来提供静态文件(例如图像、css 等...)你只需要向它显示如下路径

server.use('static', express.static('css'))

基本上提供链接下 css 文件夹内的所有文件

http://${host}/static/

如果您想提供静态图片，您可以执行以下操作。

server.use('images', express.static('images'))

然后您可以使用以下代码在您的代码中引用任何图像文件。

<img src="/images/<image_name>" />

您可以在此处阅读更多相关信息。 express static files

关于javascript - 在服务器上呈现页面时如何包含样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59437682/

25 4 0
文章推荐： css - Emojione 区域定义的 textarea 没有任何覆盖的 CSS 修复
文章推荐： javascript - mdInkRipple 波纹整个 mdVirtualRepeat - Angular Material
文章推荐： javascript - 更改谷歌搜索中显示的网站标题(通过 Angular 路由器和用户界面路由器控制)
文章推荐： html - 在 Bootstrap 网格中对齐大小不等的图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com