我是服务器渲染我的反应应用程序像这样:
export default ({ clientStats }: { clientStats: any }) => async (req: Request, res: Response, next: any) => {
const context: any = {};
const app = (
<StaticRouter location={req.url} context={context}>
<Application />
</StaticRouter>
);
if (context.url) {
res.writeHead(301, {
Location: context.url
});
res.end();
return;
}
const { styles, js, scripts } = flushChunks(clientStats, {
chunkNames: flushChunkNames()
});
const appString = renderToString(app);
const { title } = Helmet.renderStatic();
res.status(200).send(`
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${styles}
${title}
</head>
<body>
<div id="root">${appString}</div>
<script type=\'text/javascript\' src=\'init.js\' defer></script>
</body>
</html>
`);
};
如何引用webpack构建之外的脚本？
我有一个init.js很少做的文件,我想引用它.
我在哪里可以放置它,以便在呈现html时,脚本标记解析？
这很简单但有点复杂,首先我解释所有方法,然后在代码中显示.
您应该考虑一个文件夹,JavaScript列出他们不在webpack构建的所有文件.然后将它们放入此文件夹,然后将其externals导入webpack配置.然后将其设置为单独的供应商文件,并且绝对输出文件名应该动态生成,因此webpack构建其捆绑包然后将JavaScript文件复制到dist文件夹中.遵循以下:
// webpack.config.js
...
module.exports = {
...
externals: {
separateFile: `${srcRoot}/outFiles/yourJavaScriptFile.js`,
},
...
};
通过使用上面的代码,您可以考虑文件的JavaScirpt文件夹,并将其webpack作为externals配置导入配置.
现在,您应该将其作为单独的文件与应用程序文件一起导入.见下文:
// webpack.config.js
...
module.exports = {
...
entry: {
myFile: 'separateFile', // <== its your external imported file
app: `${srcRoot}/app/index.js`, // <== its your app file
},
output: {
path: '/dist',
filename: '[name].js' // <== dynamically make your JavaScript files,
// so, in dist folder you can see app.js and
// myFile.js file
}
...
};
当然,您应该将这些文件导入模板函数,因此:
...
res.status(200).send(`
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${styles}
${title}
</head>
<body>
<div id="root">${appString}</div>
<script src="app.js" defer></script>
<script src="myFile.js" defer></script>
</body>
</html>
`);
...
| 归档时间： |
|
| 查看次数： |
271 次 |
| 最近记录： |