2

相关问题似乎不适用于我的情况。由于我不明白问题出在哪里，也许我只是没有找到解决方案。

我对 Django 有一些经验，但这是我第一次使用 webpack 和 NPM。我的预期行为很简单。我希望能够在我现有的 Django 项目中包含以下 JS 代码并访问/使用scene。

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

我从未使用过包（文件？）管理器，但我认识到导入语句需要某种框架，如 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 静态文件夹中。在我正在访问的 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 中）

然后，我在 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

但是，如果我尝试访问sceneconst 它会返回一个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在浏览器控制台上调用。

我犯了一个简单的错误吗？这里实际上出了什么问题，我能做些什么来解决它？

4

0 回答 0