指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

source.enableCustomEntry

  • 类型： boolean
  • 默认值： false

该选项用于使用 Modern.js 自定义入口场景。开启此选项后，Modern.js 将尝试使用 src/entry.[jt]sx 与 src/entry.server.[jt]sx 文件作为项目的入口。

示例

首先，在配置文件中开启此选项：

modern.config.ts
export default defineConfig({
  source: {
    enableCustomEntry: true,
  },
});

创建 src/entry.tsx 文件，在渲染前执行某些行为：

import { createRoot } from '@modern-js/runtime/react';
import { render } from '@modern-js/runtime/browser';

const ModernRoot = createRoot();

async function beforeRender() {
   // todo
}

beforeRender().then(() => {
  render(<ModernRoot />);
});
INFO

更多浏览器端入口相关内容可参考页面入口。

创建 src/entry.server.tsx 文件，为渲染响应添加自定义行为：

import { renderString, createRequestHandler } from '@modern-js/runtime/ssr/server';
import type { HandleRequest } from '@modern-js/runtime/ssr/server';

const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
  // do something before rendering
  const body = await renderString(request, <ServerRoot />, options);

  const newBody = body + '<div>Byte-Dance</div>';

  return new Response(newBody, {
    headers: {
      'content-type': 'text/html; charset=UTF-8',
      'x-custom-header': 'abc',
    },
  });
};

export default createRequestHandler(handleRequest);
ON THIS PAGE