romaro

Попробуйте посмотреть на MobX, если вам близок ООП-подход. Стейт вашей страницы товара можно оформить в виде отдельного класса, который передается в пропс компонента-обертки вашей страницы и все вложенные компоненты могут быть так же завязаны на этот стейт. При переходе на другую страницу выполняете новый запрос и обновляете поля этого класса, которые помечены как отслеживаемые для библиотеки MobX.

Вот здесь есть примеры кода.

Попробуйте в tsconfig указать:

{
    "compilerOptions": {
        "module": "ESNext"
    }
}

https://www.typescriptlang.org/tsconfig#module

Или вызвать tsc --module esnext index.ts

Мне кажется, TypeScript, т.к. он помогает провести ревизию знаний JS. И с Реактом потом будет проще. Ну и если заинтересует разработка под .NET, на C# будет комфортнее переходить при хорошем понимании TS.

Вроде бы смог решить свою задачу при помощи плагина html-webpack-injector и настройки чанок. Пример кода:

const testArr2 = [
    new HtmlWebpackPlugin({
        template: `./templates/pages/test.ejs`,
        filename: `./views/test.njk`,
        chunks: ['index', 'chunk1']
    }),
    new HtmlWebpackInjector(),
    new HtmlWebpackPlugin({
        template: `./templates/pages/test2.ejs`,
        filename: `./views/test2.njk`,
        chunks: ['index', 'chunk2']
    }),
    new HtmlWebpackInjector()
]

export default {
    context: path.resolve(__dirname, 'source'),
    entry: {
        index: './entry.js',
        chunk1: './templates/pages/chunk1.js',
        chunk2: './templates/pages/chunk2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'public'),
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        ...testArr2
< some code >

Осталась только проблема с минификацией: у каждого файла собственное пространство имен и, как следствие, из чанок я не могу сослаться на классы в основном бандле. Но как я понимаю, это особенность работы лоудеров вебпака: они обрабатывают файлы по отдельности и не объединяют их в общий пул.

В связи с этим вопрос по минификации: как запретить лоудеру бабеля (babel-loader) менять названия идентификаторов в коде при компиляции в режиме production? Как я понимаю, это единственный выход.

Попробовал применить в настройках, не помогло:

{
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        minified: false
                    }
                }
            },