Django：如何在另一个 javascript 文件中导入 javascript答案

【问题标题】：Django: How to import a javascript inside another javascript fileDjango：如何在另一个 javascript 文件中导入 javascript
【发布时间】：2019-02-26 02:23:05
【问题描述】：

如何导入内部 JavaScript 文件并使用 Django 加载另一个 js。

这样的陈述不起作用：

import { PolymerElement, html } from '{% static "@polymer/polymer/polymer-element.js" %}';
import '{% static "@polymer/app-layout/app-drawer/app-drawer.js" %}';

还有这些：

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/app-layout/app-drawer/app-drawer.js';

// myapp-shell.js
import `${static_path}`;
//....

<!DOCTYPE html>
<html lang="en">
    <head>
        {% load static %}
        <script src="{% static 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js' %}"></script>
        <script src="{% static 'node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js' %}"></script>

        <!-- Loading app-shell -->
        <script>
            var static_path = '{% static "my-icons.js" %}';
            console.log(static_path);
        </script>
        <script type="module" src="{% static 'mycomponents/myapp-shell.js' %}"></script>
    </head>
    <body>
        <myapp-shell></myapp-shell>
    </body>
</html>

有没有一种方法可以做到这一点，而无需将代码捆绑在一个大文件中，也无需调用 html 文件中可能需要的所有文件。谢谢

【问题讨论】：

标签： javascript django

【解决方案1】：

在你的 JS 文件中使用 Django 模板标签肯定是不对的，因为它们不会被 Django 的模板加载器处理。我建议：

(a) 在您的 JS 文件中仅使用相对路径导入。

或

(b) 设置您的 Django STATICFILE_DIRS 设置以包含 node_modules 目录并将 STATIC_ROOT 设置为类似“/static”的内容。然后将您的模块导入为import { x } from '/static/path/to/module'。

编辑：语法

【讨论】：

【解决方案2】：

我搜索了很长时间，我发现这样做的方法是：

在你的 mains 脚本中使用这个函数。

function include(file) { 
  
    var script  = document.createElement('script'); 
    script.src  = file; 
    script.type = 'text/javascript'; 
    script.defer = true; 
    
    document.getElementsByTagName('head').item(0).appendChild(script); 
    
}

然后像这样加载你的脚本：

include('/static/js/your_js_file.js');

别忘了在 settings.py 中注册你的静态文件目录

示例：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "your_folder of library"),
]

【讨论】：

非常感谢，效果很好

【解决方案3】：

也许你可以在你的 js 导入顶部使用一个全局变量，因为静态它只适用于 django 模板，你可以在你的模板文件中做这样的事情：

<script>
    var static_path = '{% static "@polymer/polymer/" %}';
</script>

然后使用这个路径导入你的js文件

import { PolymerElement, html } from `${static_path}/polymer-element.js" %}`;

【讨论】：

很抱歉，但这会导致语法错误。我尝试了这种方法的一些变体，但没有奏效。
请记住，如果你想在 js 文件中导入，你必须将类型设置为模块，所以在你的 js 文件中你想要导入必须像这样声明
var static_path = '{% static "my-icons.js" %}';导入${static_path}； myapp-shell.js:29 Uncaught SyntaxError: Unexpected template string
导入 ${static_path} 或导入 ${static_path} ?
在你的 JS 文件中使用 Django 模板标签肯定是不对的，因为它们不会被 Django 的模板加载器处理。我建议（a）在您的 JS 文件中仅使用相对路径导入或（b）设置您的 Django STATICFILE_DIRS 设置以包含 node_modules 目录并将STATIC_ROOT 设置为类似“/static”的内容。然后将您的模块导入为import { x } from '/static/path/to/module'