Телеграмм чат группы webpack

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

не знаю на счет ноддемона, что ты там хотел, но касательно ssr и react.
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее

Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига

import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'

loadableReady(() => {
    hydrate(
        <App />,
        document.getElementById('root')
    )
})

Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'

import ReduxProvider  from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App            from '../../../client/components/App'

import store from '../../../client/store'

interface IRenderApp {
    html:    string
    store:   IStore
    scripts: string
    links:   string
    styles:  string
}

export default function renderApp(url: string, context: object = {}): IRenderApp {
    const statsFile = '../../../dist/client/loadable-stats.json'
    const extractor = new ChunkExtractor({
        statsFile,
        entrypoints: [ 'app' ]
    })
    const jsx = extractor.collectChunks(
        <ReduxProvider>
            <RouterProvider
                location={ url }
                context={ context }
            >
                <App />
            </RouterProvider>
        </ReduxProvider>
    )
    const html  = renderToString(jsx)
    const redux = store.getState()
    const scripts = extractor.getScriptTags()
    const links   = extractor.getLinkTags()
    const styles  = extractor.getStyleTags()

    return {
        html,
        store: redux,
        scripts,
        links,
        styles
    }
}

Pastebin

[JavaScript] const path = require('path') const TerserPlugin = require('terser-webpack-plugi - Pastebin.com

источник

17:16пожаловаться #3

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

ymdev

не знаю на счет ноддемона, что ты там хотел, но касательно ssr и react.
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее

Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига

import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'

loadableReady(() => {
    hydrate(
        <App />,
        document.getElementById('root')
    )
})

Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'

import ReduxProvider  from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App            from '../../../client/components/App'

import store from '../../../client/store'

interface IRenderApp {
    html:    string
    store:   IStore
    scripts: string
    links:   string
    styles:  string
}

export default function renderApp(url: string, context: object = {}): IRenderApp {
    const statsFile = '../../../dist/client/loadable-stats.json'
    const extractor = new ChunkExtractor({
        statsFile,
        entrypoints: [ 'app' ]
    })
    const jsx = extractor.collectChunks(
        <ReduxProvider>
            <RouterProvider
                location={ url }
                context={ context }
            >
                <App />
            </RouterProvider>
        </ReduxProvider>
    )
    const html  = renderToString(jsx)
    const redux = store.getState()
    const scripts = extractor.getScriptTags()
    const links   = extractor.getLinkTags()
    const styles  = extractor.getStyleTags()

    return {
        html,
        store: redux,
        scripts,
        links,
        styles
    }
}

Pastebin

[JavaScript] const path = require('path') const TerserPlugin = require('terser-webpack-plugi - Pastebin.com

спасибо

источник

17:16пожаловаться #4

y

ymdev in Webpack — русскоговорящее сообщество

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

источник

17:16пожаловаться #5

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

ymdev

не знаю на счет ноддемона, что ты там хотел, но касательно ssr и react.
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее

Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига

import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'

loadableReady(() => {
    hydrate(
        <App />,
        document.getElementById('root')
    )
})

Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'

import ReduxProvider  from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App            from '../../../client/components/App'

import store from '../../../client/store'

interface IRenderApp {
    html:    string
    store:   IStore
    scripts: string
    links:   string
    styles:  string
}

export default function renderApp(url: string, context: object = {}): IRenderApp {
    const statsFile = '../../../dist/client/loadable-stats.json'
    const extractor = new ChunkExtractor({
        statsFile,
        entrypoints: [ 'app' ]
    })
    const jsx = extractor.collectChunks(
        <ReduxProvider>
            <RouterProvider
                location={ url }
                context={ context }
            >
                <App />
            </RouterProvider>
        </ReduxProvider>
    )
    const html  = renderToString(jsx)
    const redux = store.getState()
    const scripts = extractor.getScriptTags()
    const links   = extractor.getLinkTags()
    const styles  = extractor.getStyleTags()

    return {
        html,
        store: redux,
        scripts,
        links,
        styles
    }
}

Pastebin

[JavaScript] const path = require('path') const TerserPlugin = require('terser-webpack-plugi - Pastebin.com

а кто отвечает за то, что ты можешь импортировать на сервере из клиента?

источник

17:21пожаловаться #6

y

ymdev in Webpack — русскоговорящее сообщество

Bogdan Aleksandrovich

а кто отвечает за то, что ты можешь импортировать на сервере из клиента?

не очень понял вопроса

источник

17:24пожаловаться #7

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

я вот делаю конфиг и не могу имортировать на сервере из клиента

источник

17:24пожаловаться #8

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

ymdev

не знаю на счет ноддемона, что ты там хотел, но касательно ssr и react.
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее

Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига

import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'

loadableReady(() => {
    hydrate(
        <App />,
        document.getElementById('root')
    )
})

Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'

import ReduxProvider  from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App            from '../../../client/components/App'

import store from '../../../client/store'

interface IRenderApp {
    html:    string
    store:   IStore
    scripts: string
    links:   string
    styles:  string
}

export default function renderApp(url: string, context: object = {}): IRenderApp {
    const statsFile = '../../../dist/client/loadable-stats.json'
    const extractor = new ChunkExtractor({
        statsFile,
        entrypoints: [ 'app' ]
    })
    const jsx = extractor.collectChunks(
        <ReduxProvider>
            <RouterProvider
                location={ url }
                context={ context }
            >
                <App />
            </RouterProvider>
        </ReduxProvider>
    )
    const html  = renderToString(jsx)
    const redux = store.getState()
    const scripts = extractor.getScriptTags()
    const links   = extractor.getLinkTags()
    const styles  = extractor.getStyleTags()

    return {
        html,
        store: redux,
        scripts,
        links,
        styles
    }
}

Pastebin

[JavaScript] const path = require('path') const TerserPlugin = require('terser-webpack-plugi - Pastebin.com

вот как тут

import App from './App'

источник

17:24пожаловаться #9

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

ты можешь, потому что точка входа стоит src/index , а не src/client/index ?

источник

17:25пожаловаться #10

y

ymdev in Webpack — русскоговорящее сообщество

У меня один репозиторий, в котором код для сервера и клиента рядом друг с другом.
Я из сервера обращаюсь к исходникам клиента

источник

17:25пожаловаться #11

y

ymdev in Webpack — русскоговорящее сообщество

источник

17:25пожаловаться #12

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

ymdev

у меня тоже, но при импорте из клиента на сервере, пишет, что нет модуля

источник

17:26пожаловаться #13

y

ymdev in Webpack — русскоговорящее сообщество

А потом это все собираю через webpack.
И в итоге я имею

/dist/server - для сервера
/dist/client - для браузера

А потом сервер запускаю из /dist/server
Как можно догадаться, после сборки на сервере чистый js на commonjs-модулях

источник

17:28пожаловаться #14

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

вроде что то понял, буду пробовать

источник

17:28пожаловаться #15

y

ymdev in Webpack — русскоговорящее сообщество

Ну то есть я пишу import везде. А после сборки там будет require

источник

17:28пожаловаться #16

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

у меня ошибка видимо была из-за этого

 entry: path.resolve(__dirname, "../src/server/index.jsx"),

источник

17:29пожаловаться #17

BA

Bogdan Aleksandrovic... in Webpack — русскоговорящее сообщество

Bogdan Aleksandrovich

у меня ошибка видимо была из-за этого

 entry: path.resolve(__dirname, "../src/server/index.jsx"),

и он не видит модули выше

источник

17:29пожаловаться #18

A

Alex CherryTea in Webpack — русскоговорящее сообщество

ymdev

не знаю на счет ноддемона, что ты там хотел, но касательно ssr и react.
Условно, тебе нужно 2 клиента:
1) с hydrate, который будет подключен в браузере через скрипт
2) для сервера, в котором будет StaticRouter и прочее

Вот для клиента конфиг https://pastebin.com/GDQ1JMV6
И условно точно входа для этого конфига

import React from 'react'
import { hydrate } from 'react-dom'
import { loadableReady } from '@loadable/component'
import App from './App'

loadableReady(() => {
    hydrate(
        <App />,
        document.getElementById('root')
    )
})

Вот для сервера конфиг (из-за jsx приходится весь сервер собирать) https://pastebin.com/b9cug8Ur
И точка входа для серверной сборки клиента

import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import { IStore } from '../../../client/src/types/store'

import ReduxProvider  from '../../../client/components/ReduxProvider'
import RouterProvider from '../../../client/components/RouterProvider'
import App            from '../../../client/components/App'

import store from '../../../client/store'

interface IRenderApp {
    html:    string
    store:   IStore
    scripts: string
    links:   string
    styles:  string
}

export default function renderApp(url: string, context: object = {}): IRenderApp {
    const statsFile = '../../../dist/client/loadable-stats.json'
    const extractor = new ChunkExtractor({
        statsFile,
        entrypoints: [ 'app' ]
    })
    const jsx = extractor.collectChunks(
        <ReduxProvider>
            <RouterProvider
                location={ url }
                context={ context }
            >
                <App />
            </RouterProvider>
        </ReduxProvider>
    )
    const html  = renderToString(jsx)
    const redux = store.getState()
    const scripts = extractor.getScriptTags()
    const links   = extractor.getLinkTags()
    const styles  = extractor.getStyleTags()

    return {
        html,
        store: redux,
        scripts,
        links,
        styles
    }
}

Pastebin

[JavaScript] const path = require('path') const TerserPlugin = require('terser-webpack-plugi - Pastebin.com

> из-за jsx приходится весь сервер собирать
а если jsx писать только в jsx файлах?

источник

17:30пожаловаться #19

y

ymdev in Webpack — русскоговорящее сообщество

Alex CherryTea

> из-за jsx приходится весь сервер собирать
а если jsx писать только в jsx файлах?

Там ts + jsx + фичи, поддерживаемые бабелем и декораторы. Поэтому сунуть это все под один сборщик - нормальная идея

источник

17:31пожаловаться #20