使用 npm 导入 date-fns答案

【问题标题】：Import date-fns with npm使用 npm 导入 date-fns
【发布时间】：2020-05-08 23:34:10
【问题描述】：

我是 Web 开发新手，正在学习一个只有 1 年历史的 JS 教程，但使用过时的指令来导入带有 CDN 的 JS 库 date-fns。我喜欢 CDN，不幸的是现在只有一个 npm 包可用 (link to documentation)。

我确保 npm 已更新，然后在终端中使用以下行将 date-fns 安装到所需目录：

npm install date-fns --save

除了这个例子之外，没有更多关于如何使用这个包的说明，我假设它在 JS 文件而不是 html 中：

import { formatDistance, subDays } from 'date-fns'

...但使用此语法尝试从包中导入 isToday 方法会在我的 Chrome 控制台中发出以下警告：

Uncaught SyntaxError: Cannot use import statement outside a module

这个问题在其他地方被问到，但是这些答案中有太多与 npm 相关的术语，我不知道我应该做什么。此外，代码不同且较旧。 'module' 是指 npm 包吗？

人们希望一年前的教程足够新，可以学习。唉，耳垢。

【问题讨论】：

标签： javascript date npm date-fns

【解决方案1】：

您可以在此处获取date-fns 的 CDN 构建：https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js

import/export 无法在原生浏览器中运行，尤其是在您尝试使用 npm 包时。由于您是初学者，我不想让您感到困惑，但import/export 在特定情况下有效。你可以在这里阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

一旦你熟悉了 web 开发，你可以尝试使用像 Parcel 这样的打包工具，它允许你使用 npm 包并将它们组合成一个可以在 web 中使用的 JS 文件：https://parceljs.org/

【讨论】：

谢谢桑吉斯。这是迄今为止最简单的解决方案，因为我正在尝试遵循使用 CDN 的教程，并且效果很好。