如何在Elixir Phoenix项目中全局引用JavaScript导入？

我使用Elixir搭建全新Phoenix Web项目时遇到问题：在app.js中导入的JavaScript无法在其他需导入的JS文件中使用。

已通过以下命令安装DataTables.net：

npm install datatables.net-dt --save

相关代码如下：

app.js #

import '../vendor/myjquery'
import DataTable from 'datatables.net-dt';
import '../vendor/mydatatable'

mydatatable.js #

console.log("dataTable?")
new DataTable('#charges-table');

myjquery.js #

import jQuery from 'jquery';
window.jQuery = jQuery
window.$ = jQuery

运行时出现报错：

Uncaught ReferenceError: DataTable is not defined
    <anonymous> http://localhost:4000/assets/app.js:15971
    <anonymous> http://localhost:4000/assets/app.js:15981

若在使用DataTable的文件内直接导入则可正常运行，但操作十分不便。想了解如何将DataTables设置为全局可用，让站点内其他.js和.html文件均可直接使用？

要让DataTable全局可用，只需像处理jQuery那样，将其挂载到window对象上：

修改app.js中的代码，在导入DataTable后将其赋值给window：

import '../vendor/myjquery'
import DataTable from 'datatables.net-dt';
// 挂载DataTable到全局window对象
window.DataTable = DataTable;
import '../vendor/mydatatable'

这样处理后，mydatatable.js里就能直接访问全局的DataTable，HTML文件中也可以在<script>标签里直接调用new DataTable(...)。

额外注意事项：

• 保持当前的导入顺序：先导入jQuery，再处理DataTable的全局挂载，最后导入依赖DataTable的文件，这个顺序能确保依赖关系正确。
• 后续新增的依赖DataTable的插件或自定义脚本，只要在app.js中完成全局挂载后再导入，就能正常使用全局的DataTable。

内容的提问来源于stack exchange，提问作者Thomas