React JS, исходники после публикации сайта точно такие же, как и в среде разработки. Это нормально? Можно ли превратить их в нечитаемое месиво?

Question

[Борис Животное]

Залил сайт на VPS. Открываю его и вижу, что там исходники очень хорошо структурированы, по-моему даже лучше, чем при дебаге. При дебаге куча папок со странными именами, а вот после релиза прям говорят: копируй меня и забирай себе. Даже комментарии в коде все остались. С этим можно что-то сделать? Приложение ASP.NET Core 2.2 + React JS.

Comments

[Дмитрий]

С этим можно что-то сделать?

Конечно можно. Погуглить "обфускация react.js" и всё связанное с выкатом проекта в продакшен.

[Павел Диденко]

Покажите пример, в каком виде код? Что за сборка проекта? Свой webpack или через create-react-app?

[Борис Животное]

Павел Диденко, код в виде исходников. В браузере ходишь по сайту, открываешь инструменты разработчика, а там исходники. Думаю, пример не нужен, ибо словами я объяснил нормально. Я создал проект в Microsoft Visual Studio 2019 из шаблона проекта.

[Павел Диденко]

Борис Животное, ну раз пример не нужен, ответ тоже думаю не нужен)

[Борис Животное]

Павел Диденко, мне что выложить сюда исходники сайта или что? Я не понимаю, зачем вам пример, который вы можете себе легко представить. Обычный React JS проект, с JSX кодом.

Это метод render в App.jsx

render() {
        console.log("App.render.");

        const authState = this.getAuthState();
        if (authState === AUTH_STATE_INITIAL_AUTH_ATTEMPT) {
            return <Loader text="Please wait..."/>
        }

        return (
            <ErrorBoundary>
                <ServerApiProvider value={this.state.serverApi}>
                    <AppAuthProvider value={this.appAuthContext}>
                        <DataServiceProvider value={this.dataService}>
                            <BrowserRouter>
                                <div className="container-fluid">
                                    <Header brand={this.state.config.brandName}/>
                                    <Switch>
                                        <Route path={'/'} exact component={Main}/>
                                        <Route path={'/administrator'} component={Admin}/>
                                        <Route path={'/login'} component={Login}/>
                                        {/* Если ни один роут не сработал, то переадресуем на главную страницу */}
                                        <Redirect to="/"/>
                                    </Switch>
                                </div>
                            </BrowserRouter>
                        </DataServiceProvider>
                    </AppAuthProvider>
                </ServerApiProvider>
            </ErrorBoundary>
        );
    }

[Борис Животное]

Павел Диденко, я могу создать новый проект в Visual Studio 2019 и выложить его куда-нибудь. Вот это будет один в один почти пример. Код Javascript в виде классов.

[Павел Диденко]

Борис Животное, какая разница где вы создаете проект? Хоть в нотпаде создайте, без разницы.
Я вас спрашиваю про сборщик проекта, через что вы создаете проект? Утилитой фейсбука create-react-app или своя сборка webpack?
Желательно вообще ссылку на сам проект, чтобы посмотреть на эти исходники. Т.к. сдается мне вы ошибаетесь, потому что браузер не умеет читать JSX сам, ему для этого нужен бабель, который транспилит этот код в обычный JS и именно его уже может распознать браузер.
Скорее всего проблема в вашей настройке webpack

[Борис Животное]

Павел Диденко, я не спорю, потому что я в этом пока не сказать, что хорошо разбираюсь. Где это можно посмотреть? Я думаю, что это webpack.

[Алексей Ярков]

Борис Животное,

Я не понимаю, зачем вам пример, который вы можете себе легко представить

Ты потрясающий!

[Борис Животное]

Алексей Ярков, так он не объяснил, что он хочет увидеть. Для меня не очевидно, зачем ему пример. Да и пример чего? Того где я какие классы объявил? Я не телепат и не эксперт по React + JS и прочим делам. Я не в курсе, что задумал человек и что ему конкретно показать. Все исходники я выкладывать не буду в любом случае так как это не поделка ради забавы.

[hzzzzl]

Павел Диденко, Алексей Ярков,
зачем код сайта, он про такое



https://alekangelov.com/ (например)

[Алексей Ярков]

hzzzzl, это в сторону source maps копать

[Борис Животное]

hzzzzl, именно. У меня прямо вся структура проекта вот так видна, как будто я в WebStorm открыл. Даже подсветка кода и комментарии. Очень удобно, чтобы забрать код себе, а не платить мне деньги.

Answer 1

[hzzzzl]

да, это вебпак, искать по слову react webpack disable source maps

с create-react-app я делаю так как в этом совете
https://stackoverflow.com/a/54609789

Comments

[Шохрух Шаймардонов]

Борис Животное, ответ лайкнули, а решением не отметили. Не надо так...

[Борис Животное]

Шохрух Шаймардонов, спасибо за беспокойство, но я отметил решением ещё до того как увидел, что вообще есть какой-то комментарий. Вам не приходило в голову, что я могу заниматься сразу несколькими делами, например, по болезни работать из дома и пока компилируется проект создать тему, решить ещё вопрос. На проверку является ли ответ решением у меня ушло много времени, так как я занят другими делами. Я сам знаю, что нужно делать, а что нет и про такие вещи не забываю.

[Борис Животное]

Вообще отвлекли меня, хотел написать, что да, сработало. Хотя я пробовал и другие варианты, предложенные по ссылке. Сработало именно с .env файлом.

[Шохрух Шаймардонов]

Борис Животное,

например, по болезни работать из дома

выздоравливайте

[Борис Животное]

Шохрух Шаймардонов, спасибо. Уже почти.