javascript 将库js导入脚本并使其在脚本之外可用

ws51t4hk 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(78)

我有一个使用Laravel 10设置的项目，它反过来使用vite。我在理解页面脚本和导入moment或dayjs等js库的最佳方法方面遇到了问题。
通过npm安装后，我更新了app.js以导入库：

import './bootstrap';
import 'laravel-datatables-vite';
import dayjs from 'dayjs';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';

window.Alpine = Alpine;

Alpine.plugin(focus);

Alpine.start();

app.js通过页面加载。但是，当我尝试从页面中的脚本标记访问dayjs时，我得到一个错误：dayjs没有定义。
我认为这意味着导入不适用于app.js之外的脚本。在这种情况下，我如何最好地确保dayjs在模块之外可用？
我已经尝试添加window.dayjs = dayjs;但如果我尝试在脚本中使用它，例如：

const date = new Date();
console.log(dayjs(date, 'd/m/Y'));

这会产生错误dayjs is not defined
如果我使用windows.dayjs()，我会得到一个错误，dayjs不是一个函数。
我可以看到dayjs是附加到窗口对象，当我检查与Chrome
不确定正确的解决方法
谢谢你

JavaScript

来源：https://stackoverflow.com/questions/76209183/importing-library-js-into-a-script-and-making-available-outside-of-the-script

1条答案

按热度按时间

eit6fx6z1#

解决方案如下：由于Laravel加载app.js defer，您无法在正常模式下访问dayjs内联。
你可以使用window.onload，或者如果你想使用阻塞内联脚本，使用type=“module”
示例：

<script type="module">
dayjs()
</script>

或者：

<script>
window.onload = function () {
dayjs()
}
</script>

我不确定，但如果它不工作，尝试添加window.dayjs = dayjs;到app.js！
以下是我关于dayjs的完整app.js：

import dayjs from "dayjs";

import utc from 'dayjs/plugin/utc'
import updateLocale from 'dayjs/plugin/updateLocale'
import timezone from 'dayjs/plugin/timezone'
import duration from 'dayjs/plugin/duration'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import relativeTime from 'dayjs/plugin/relativeTime'
import LocaleData from 'dayjs/plugin/LocaleData'

import 'dayjs/locale/hu'

dayjs.extend(utc)
dayjs.extend(updateLocale)
dayjs.extend(timezone)
dayjs.extend(duration)
dayjs.extend(customParseFormat)
dayjs.extend(relativeTime)
dayjs.extend(LocaleData)

window.dayjs = dayjs;

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 将库js导入脚本并使其在脚本之外可用

1条答案

相关问题

热门标签

最新问答