Я настраиваю Razzle и хотел добавить в него движок шаблонов, чтобы сделать index.html более читабельным, а не просто иметь его в JavaScript. После нескольких часов попыток я сдаюсь.
Я начал с создания приложения Razzle с использованием NPX:
npx create-razzle-app my-app
Я выбрал Рули в качестве механизма шаблонов и установил его, используя NPM:
npm i -S handlebars handlebars-loader
И создал конфигурацию Razzle для загрузки .handlebars файлов:
// razzle.config.js
module.exports = {
modify(config) {
// Modify Webpack to load handle Handlebars files
config.module.rules.unshift({
test: /\.handlebars$/,
loader: "handlebars-loader"
})
return config
}
}
Затем я создал файл src/index.handlebars, скопировав index.html содержимое файла src/server.js при переписывании переменных в синтаксис Handlebars:
<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{css}}">
<script src="{{js}}" defer></script>
</head>
<body>
<div id="root">{{markup}}</div>
</body>
</html>
И переписать src/server.js:
import App from './App';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import express from 'express';
import { renderToString } from 'react-dom/server';
import template from "./index.handlebars"
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
const context = {};
const markup = renderToString(
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
);
if (context.url) {
res.redirect(context.url);
} else {
const content = template({
css: assets.client.css,
js: assets.client.js,
markup
})
res.status(200).send(content);
}
});
export default server;
Давайте запустим это:
npm start
Я ожидаю увидеть тот же контент, что и при установке fre sh Razzle. Когда я посещаю http://localhost:3000, я получаю только такой вывод:
module.exports = __webpack_public_path__ + "static/media/index.9c4c09c4.handlebars";
Что я делаю не так?