Браузер syn c без повторного рендеринга E JS частичных файлов - PullRequest
Новая
       4

Браузер syn c без повторного рендеринга E JS частичных файлов

0 голосов
/ 04 апреля 2020

Я использую Browser Syn c с Webpack и Express для разработки простого сайта с использованием шаблонов E JS. Все работает нормально, за исключением того, что syn c браузера не отображает недавно обновленные партиалы E JS при перезагрузке браузера.

Тем не менее, он на самом деле замечает, что в частичном файле есть изменение, и когда я сохраняю его, он перезагружает окно браузера.

Я пытался использовать несколько путей, которые варьируются от **/*.ejs для непосредственной установки папок с использованием массива, как показано ниже: 

        new BrowserSyncPlugin({
            files: ['src/views/pages/index.ejs', 'src/views/pages/partials/header.ejs'],
            proxy: `https://localhost:${process.env.PORT}`
        }),

У меня такое ощущение, что это может быть какой-то конфликта либо с Browser Syn c, Html Webpack Plugin, либо с E JS Webpack Loader. Соответствующие строки конфигурации приведены ниже: 

        new BrowserSyncPlugin({
            files: ['src/views/pages/index.ejs', 'src/views/pages/partials/header.ejs'],
            proxy: `https://localhost:${process.env.PORT}`
        }),
        new HtmlWebpackPlugin({
            template: 'ejs-webpack-loader!src/views/pages/index.ejs',
            filename: 'index.html',
            domain: process.env.DOMAIN
        }),

И, чтобы дать некоторый контекст, файл header.e js включен следующим образом: 

        <%- include partials/header.ejs %>

Я предполагаю, что это что-то делать с одним из загрузчиков, так как браузер syn c фактически замечает изменения и перезагружает страницу. Загрузчик просто не рендерит включает. Если я внесу прямое изменение в index.ejs, то оно на самом деле будет перерисовано.

Заранее спасибо.

РЕДАКТИРОВАТЬ:

Мой Express сервер конфигурации выглядит следующим образом: 

require('dotenv').config({path: './.env'});
const express = require('express');
const app = express();
const WebpackDevMiddleware = require('webpack-dev-middleware');
const https = require('https');
const fs = require('fs');
const config = require('../webpack.dev');
const helmet = require('helmet');
const webpack = require('webpack');
const compiler = webpack(config);

const {
    SSL_CERT,
    SSL_KEY,
    SSL_PW,
    PORT
} = process.env;
const httpsOptions = {
    key: fs.readFileSync(SSL_KEY),
    cert: fs.readFileSync(SSL_CERT),
    passphrase: SSL_PW
};
const secureServer = https.createServer(httpsOptions, app);
app.use(helmet());

app.use(WebpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    reload: true
}));

const listener = secureServer.listen(PORT, () => console.log(`Connected on ${listener.address().port}`));

Еще одно примечание, если я сохраню index.e js, он будет отображать изменения, внесенные в детей.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Проблема в том, что плагин ejs-webpack-loader не обрабатывает повторный рендеринг включенных файлов.

Чтобы обойти это, необходимо использовать стандартный метод webpack require().

ТАК, мой index.ejs файл теперь выглядит следующим образом: 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <%- include partials/head.ejs %> 
        <title>Making Stuffs | Coming Soon Boilerplate</title>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <%- require ('ejs-webpack-loader!./partials/navbar.ejs')() %>
        <%- require ('ejs-webpack-loader!./partials/intro.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/about.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/portfolio.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/contact.ejs')() %> 
        <%- require ('ejs-webpack-loader!./partials/blog.ejs')() %> 
    </body>
</html>
0 голосов
/ 07 апреля 2020

Пожалуйста, обратитесь к конфигурации devServer здесь: 

 devServer: {
        open: true,
        contentBase: path.resolve(`src`), // Specify your source path
        inline:true,
        watchContentBase: true, // Must be true
        port: 4000,
        host: "127.0.0.1",
        overlay: {
            errors: true,
            warnings: false
        },
    },
...