Django, webpack и NPM. Упаковка, кажется, работает, но не могу получить доступ к коду

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

У меня есть некоторый опыт работы с Django, но это мой первый опыт работы с webpack и NPM. Моя цель проста. Я хочу иметь возможность включить следующий JS-код в мой существующий проект Django и получить доступ/использовать scene.

import * as THREE from 'three';
const scene = new THREE.Scene(); 

Я никогда не работал с менеджерами пакетов (файлов?), но я понимаю, что утверждение import требует какого-то фреймворка, например, node или npm. Я нашел руководство, которое объясняло, как я могу интегрировать Django с Webpack, чтобы я мог использовать npm. Подробный код приведен ниже, но вкратце:

У меня есть файл JavaScript, который содержит следующий код:

console.log("Before import..");
import * as THREE from 'three';
const scene = new THREE.Scene();
console.log("After import..");

Этот файл находится в моей папке django static. В Django .html, к которому я обращаюсь, я включил следующий код

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}

Здесь 'DEFAULT' относится к следующему в myProject\settings.py:

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': ['.+\.hot-update.js', '.+\.map']
    }
}

Обратите внимание, что я также включил webpack_loader в мои установленные приложения (в settings.py)

Затем я собираю staticfiles в Django, и выполняю npm run build

Поскольку я совсем новичок в npm, я не уверен в своем понимании вывода npm run build, но похоже, что все в порядке:

(env) mjpvanzuijlen@vmu059:/home/myProject$ npm run build
> user@1.0.0 build /home/myProject
> webpack

(node:1304427) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
assets by status 524 KiB [cached] 1 asset
orphan modules 1.12 MiB [orphan] 1 module
./static/js/index.js + 1 modules 1.12 MiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  main-ee513f6a0474365bade3.js (524 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (524 KiB)
      main-ee513f6a0474365bade3.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.67.0 compiled with 4 warnings in 7781 ms

Далее я перехожу на свой сайт/index.html. В консоли JS я вижу ожидаемые журналы консоли:

 Before import..                                                  main-9511e0984532502a4e7d.js:2
 After import..                                                   main-9511e0984532502a4e7d.js:2

Однако, если я пытаюсь получить доступ к scene const, то возвращается ReferenceError.

После загрузки файла main-9511e0984532502a4e7d.js, который, как я понимаю, является упакованным единственным .js файлом, который теперь должен содержать код import * as THREE from 'three'. При осмотре кода, я действительно вижу код для three.js в этом файле, но, конечно, минифицированный. Например, я вижу

console.log("Before import.."),
new ms,
console.log("After import..")

где ms действительно оказывается класс three.js scene.

Теперь я не нахожу никаких ошибок. Код, похоже, содержится в упакованном .js файле. Он даже доступен в моем шаблоне django, когда я обращаюсь к нему через интернет. Однако я все еще не могу получить к нему доступ. То есть, я хотел бы иметь возможность просто вызвать scene на консоли браузера.

Я совершаю простую ошибку? Что на самом деле происходит не так и что я могу сделать, чтобы решить эту проблему?

Вернуться на верх