如何在浏览器中加载 day.js 插件答案

【问题标题】：How to load day.js plugin in browser如何在浏览器中加载 day.js 插件
【发布时间】：2021-01-26 20:16:10
【问题描述】：

我正在尝试在客户端加载两个day.js 插件。但它似乎不起作用......我做错了什么？

Pug / Jade文件

script(defer, src='javascript/external/day.js')
script(defer, src='javascript/external/day_minmax.js')
script(defer, src='javascript/external/day_isbetween.js')

script(defer, dayjs.extend(window.dayjs_plugin_minmax))
script(defer, dayjs.extend(window.dayjs_plugin_isbetween))

console 输出

dayjs.max()
Uncaught TypeError: dayjs.max is not a function

加载的js插件文件来自：

https://unpkg.com/dayjs@1.9.1/plugin/isBetween.js

https://unpkg.com/dayjs@1.9.1/plugin/minMax.js

【问题讨论】：

标签： javascript dayjs

【解决方案1】：

这是 index.html 文件中的一个工作示例，您可以在根 Pug/Jade 文件中执行相同的操作。另外我使用的是cdn版本，但您也可以从下载它们的文件夹中导入它们。

window.dayjs_plugin_minmax vs window.dayjs_plugin_minMax 可能是问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/plugin/isBetween.js"></script>
    <script src="https://unpkg.com/dayjs@1.8.21/plugin/minMax.js"></script>
  </head>
  <body></body>
  <script>
    const minMax = window.dayjs_plugin_minMax;
    const isBetween = window.dayjs_plugin_isBetween;
    dayjs.extend(minMax);
    dayjs.extend(isBetween);
    console.log(
      "MAX: ",
      dayjs.max(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
    );
    console.log(
      "MIN: ",
      dayjs.min(dayjs(), dayjs("2018-01-01"), dayjs("2019-01-01"))
    );
    console.log(
      "BETWEEN: ",
      dayjs("2016-10-30").isBetween("2016-01-01", "2016-10-30", null, "[)")
    );
  </script>
</html>

结果如下：

【讨论】：

【解决方案2】：

在官方网站上有一个“隐藏”部分，其中包含插件的示例导入与浏览器。

https://day.js.org/docs/en/plugin/loading-into-browser

像他们说的那样为我工作：

<script src="path/to/dayjs/plugin/advancedFormat"></script>
<!-- Load plugin as window.dayjs_plugin_NAME -->
<script>
  dayjs.extend(window.dayjs_plugin_advancedFormat)
</script>

【讨论】：