拆分单个 JS 文件后的函数导入不再知道它们作为参数的 object

Question

我有一个 800 多行的单个 JS 文件，使用OpenLayers创建 web map。 这绝对是太多了。 该文件是用 vanilla JavaScript 编写的。

它的结构简单如下：

const function1 = (featurePassedFromFlask) {
  do stuff
  return someVectorLayers;
}

const function2 = (otherFeaturePassedFromFlask) {
  do stuff
  return aPoint;
}

const map = (vectorLayers, myPoint) => {
  do stuff to build the map, no returned value.
}

vectorLayers = function1(featurePassedFromFlask);
myPoint = function2(otherFeaturePassedFromFlask);

map(vectorLayers, myPoint);

如您所见，我在其中有三个主要功能，因此我决定将其拆分为三个文件，在阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference后，每个 function 一个/Statements/import和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export ：

文件function1.js ：

const function1 = (featurePassedFromFlask) {
  do stuff
  return someVectorLayers;
}
export { function1 };

文件function2.js ：

const function2 = (otherFeaturePassedFromFlask) {
  do stuff
  return aPoint;
}
export { function2 };

和文件map.js与剩余的代码+这两个新行在顶部：

import { function1 } from './function1.js';
import { function2 } from './function2.js';

“问题”是在我的 Flask 模板map.html （jinja2）中我只加载map.js

<!-- Pass first result object from Python to JS here --> 
{% if resultsObjectFromRoute1 %}
  <script type="text/javascript">
    var featurePassedFromFlask = {{ resultsObjectFromRoute1|tojson }};
  </script>
{% endif %}

<!-- Pass second result object from Python to JS here --> 
{% if resultsObjectFromRoute2 %}
  <script type="text/javascript">
    var otherFeaturePassedFromFlask = {{ resultsObjectFromRoute2|tojson }};
  </script>
{% endif %}

<script src="{{ url_for('static', filename='js/ol.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>

浏览器首先抱怨： Uncaught SyntaxError: import declarations may only appear at top level of a module所以我浏览了一下发现我必须将最后一行更改为：

<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>

它不再抱怨，但页面没有正常工作：

Uncaught ReferenceError: assignment to undeclared variable geom

我还尝试在map.html中导入我的两个函数文件，而不对前面的错误消息进行任何更改：

<script src="{{ url_for('static', filename='js/function1.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="module"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="module"></script>

如果 function 1 和 2 不必处理参数，也许它会起作用，所以我知道我破坏了与此相关的东西，因为现在那些文件“function1.js”和“function2.js”不再知道object 的存在，他们必须考虑作为其中定义的 function 的参数。 那么我怎样才能再次打开该链接，就像所有内容都封装在一个文件中一样？

ps：对于可能很糟糕的措辞抱歉，我不是 JS 专家（这也可能是我没有成功找到一些有用材料的原因）。

Answer 1

我终于弄明白了。

有两种可能性。

1. 作为 HTML 中的经典“type=application/javascript”导入

就像上面评论中建议的@Kajbo一样，删除所有导出/导入语法并在HTML中一一加载所有JS文件，最后在模板中加载主要文件（ map.js ）确实有效：

<script src="{{ url_for('static', filename='js/function1.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/function2.js') }}" type="application/javascript"></script>
<script src="{{ url_for('static', filename='js/map.js') }}" type="application/javascript"></script>

但如果它们像我最初那样作为“模块”加载，它就不起作用。

这种做法的主要缺点是，如果您最终拥有 180 个 JS 文件，则意味着您的 HTML 中有 180 个导入。 我不是很热情。

2. 作为 HTML 中的现代“type=module”导入

事实上，我注意到我在geom上遇到的错误是由于我的代码中的这一行：

geom = new ol.format.GeoJSON();

如果这种声明变量的惰性方式在使用“type=application/javascript”加载 JS 文件之前有效，那么当您将它们加载为“type=module”时它就不起作用了。 事实上，模块似乎更棘手，你现在真的必须正确声明你的变量：

let geom = new ol.format.GeoJSON();

我有许多其他类似的错误，所以我用正确的声明清理了我的代码，就是这样，它现在正在使用导出/导入 ES6 逻辑，因此您可以通过仅导入主 JS 文件（所有 JS逻辑保留在 JS 文件中；这样更干净）！