Приложение Prerender React как статический HTML
У меня есть интерактивная целевая страница (одна страница - без реагирующего маршрутизатора). Эту целевую страницу нужно будет загрузить на CMS, куда вы просто вставите HTML - это означает, что мне не нужны теги <html> <head> <body>, а файл JavaScript загружается отдельно. В настоящее время я могу просто вставить <div id = "react-root"></div> в CMS и загрузить свой связанный файл JavaScript, и страница заработает.
Однако, по отзывам, эта страница теперь должна быть доступна для сканирования во всех поисковых системах. Это означает, что мне нужно отрендерить исходный HTML-код, сгенерированный в результате реакции для вставки в CMS, и чтобы страница все еще работала должным образом.
Я пытаюсь сделать так, чтобы моя команда сборки выводила обработанный HTML-код в файл index.html, где я могу скопировать и вставить код в CMS. (У меня файл bundle.js работает нормально).
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
]
},
plugins: [
new CleanWebpackPlugin(['dist'])
],
};
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new HtmlWebpackPlugin({
inject: false,
template: require('./src/template.js'),
})
]
});
template.js
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const LandingPage = require('./App.js');
const html = ReactDOMServer.renderToString(LandingPage);
module.exports = function () {
return ReactDOM.hydrate(html, document.getElementById('lp-root'));
};
Итак, я использовал сервер response-dom-server для renderToString. Это лучший способ сделать это? Если да, то этот способ не работает, поскольку HtmlWebpackPlugin не может обрабатывать синтаксис ES6, используемый на целевых страницах (импорт и экспорт) - в любом случае об этом?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Подход кажется правильным. Однако вам может понадобиться транспилятор babel для преобразования вашего кода из синтаксиса ES6. Попробуйте добавить новое правило в конфигурацию webpack для файлов js / jsx. Что-то вроде этого:
{
test: /js$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: { presets: ["react", "es2016", "es2015"], plugins: ["transform-class-properties"] },
},
Он правильно перенесет ваш код перед использованием.
Надеюсь, поможет. Пожалуйста, вернитесь в случае каких-либо сомнений.
Вам также необходимо предоставить пресеты и плагины для конфигурации babel. Babel - это просто транспиллер. Вам также необходимо предоставить плагины, которые babel использует для преобразования нового синтаксиса в формат, читаемый браузером. Например, запрос, который я предоставил в ответе, имеет предустановку es2016. Это поможет babel преобразовать синтаксис es2016 в формат, читаемый браузером. Попробуйте добавить вышеуказанный запрос также для файлов js / jsx.
У меня действительно есть babel в моей конфигурации (я обновил свой вопрос с помощью общей конфигурации webpack, которая используется как для prod, так и для dev). Однако я все еще получаю синтаксическую ошибку «import», поэтому кажется, что HtmlWebpackPlugin выходит за рамки bable?