从外部导入脚本内部的本地模块 html

Question

我有前端和后端。从后端我得到预渲染 html （Symfony 形式），其中包括带有源标记的脚本。来源是 localhost:8001.

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <div class="container">
            {% block javascripts %}
                <script type="module" src="http://localhost:8020/build/form_generator/script.js"></script>
            {% endblock %}
        </div>
    </body>
</html>

在前端 (localhost:8020) script.js 位于 Public 文件夹中。脚本加载正常，但在脚本内部我想从前端加载另一个模块（Select2，安装到 node_modules）但我无法正确加载它。 Select2 在前端的其他脚本中正确导入。 script.js:

/** @module script*/

  import 'select2'; // gives log error 1
  import select2 from "../../../node_modules/select2/dist/js/select2"; // gives log error 2

log error 1: Uncaught TypeError: Failed to resolve module specifier "select2". Relative references must start with either "/", "./", or "../".

log error 2: GET http://localhost:8020/node_modules/select2/dist/js/select2 net::ERR_ABORTED 404 (Not Found)

Answer 1

浏览器加载的模块不能使用Node.JS模块解析规则。

他们无权访问文件系统。他们无法搜索 node_modules 目录。

您需要：

确保您要加载的模块具有 URL（如何执行此操作取决于您的 HTTP 服务器）
导入 URL

例如

import select2 from '/static/js/select2.js';

或者，使用可以执行 Node.js 模块解析的捆绑器（例如 Webpack 或 Parcel）将所有模块捆绑到一个 JS 文件中可以作为非模块加载。

从外部导入脚本内部的本地模块 html

Import local module inside of script from external html

javascript

importerror

node-modules