Django: как заставить React и экспорт / импорт работать в одном файле JS stati c? - PullRequest
Новая
       8

Django: как заставить React и экспорт / импорт работать в одном файле JS stati c?

1 голос
/ 25 февраля 2020

В моем шаблоне Django я загружаю React через CDN, а также загружаю сценарий index.js из stati c url, где находится код React: 

<!DOCTYPE html>
    <html>
        {% load static %}
        <head>
            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>  
        </head>
        <body>
            <div id="root"></div>
        </body>
        <script src="{% static 'react/js/index.js' %}" type="text/babel"></script>
    </html>

Index. js is: 

class App extends React.Component {
    constructor() {
        super()
    }

    render() {
        return <div>App</div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

Это отлично работает. Но у меня также есть скрипт helpers.js, расположенный в том же каталоге static, что и index.js, и если я пытаюсь импортировать что-то из него в index.js: 

import { some_helper } from './helpers.js'

class App extends React.Component { ...

, я получаю

ReferenceError: требование не определено

ошибка в консоли браузера.

Я мог бы изменить тип сценария на module, чтобы сделать импорт / экспорт работающим, но затем Реакт не будет работать. Поэтому вместо этого я включил require по CDN в index.html: 

<!DOCTYPE html>
    <html>
        {% load static %}
        <head>
            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>  
            <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
        </head>

, но затем получаю следующую ошибку в консоли:

Ошибка: имя модуля "помощники. js "еще не загружен для контекста: _. Используйте require ([]) https://requirejs.org/docs/errors.html#notloaded

, и я не знаю, как двигаться дальше.

Может кто-нибудь подсказать мне, как получить сделать так, чтобы и React, и импорт / экспорт работали в одном JS файле?

Если это не проблема, я бы предпочел загрузить React поверх CDN.

...