拆分單個 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 文件中；這樣更干凈）！