使用 NPM 包显示“错误：无法在模块外使用 import 语句”答案

【问题标题】：Using NPM package shows "Error: cannot use import statement outside a module"使用 NPM 包显示“错误：无法在模块外使用 import 语句”
【发布时间】：2021-08-07 05:53:05
【问题描述】：

我正在尝试使用 Typed.js 库并使用 NPM 安装它。我在“main.js”文件中使用了一个简单的示例，并将其与<script src="./main.js"></script> 链接。错误一直显示Error: Cannot using import outside a module"。所以我使用了<script type="module" src="./main.js"></script>。但现在显示Failed to resolve module specifier......Relative path references must start with "/", "./", "../"

我从Typed.js官方文档中复制了代码。

// Can also be included with a regular script tag
import Typed from 'typed.js';

var options = {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 40
};

var typed = new Typed('.element', options);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 class="element"></h1>

  <script src="./main.js"></script>
</body>

</html>

【问题讨论】：

你能在这里分享你的main.js吗？

标签： javascript node.js npm

【解决方案1】：

你为什么要在 main.js 中导入脚本而不是 HTML，那是语法错误。您需要输入 let your_varible_name = require("Typed.js") 以使其在节点中运行。如果您打算在前端使用，那么在 HTML 中使用它。它会在那里工作。

【讨论】：

我很困惑。在官方文档中，他们使用“import”语句。你说在“前端”中使用它，我如何在 HTML 中使用它？？
有 ES6 语法允许您使用“从包中导入 var_name”，但如果您不使用它。你必须使用 let var_name = require("your_installed_package.js")。我认为这就是你想要做的。如果你正在开发一个网页，那么你可以使用 HTML 来编写 .
抱歉，您添加了代码。我没看到。是的，“import Typed from 'typed.js'”这一行可能会在 js 文件中生成错误，因为您没有使用 ES6。将其改回 let Typed = require("typed.js")。就是这样。它会正常工作的。
它说“要求未定义”
好的，我明白了。您在 main.js 中导入 typed.js，然后在 HTML 中使用 main。那是个问题。您不能在要导入 HTML 的另一个文件中导入包。在您的 HTML 文件中单独导入它。我说对了吗？你的 main.js 是什么。您是否尝试导入输入的 main.

【解决方案2】：

如果您想在不使用 npm 的情况下使用它，请考虑将其直接导入到您的 html 中：<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> 或者这也可能有帮助：Failed to resolve module specifier

【讨论】：

但我想将它与 npm 一起使用。而且我对 webpack 还一无所知。而且，我想我很困惑，因为我在使用 webpack 的“React”中使用了“import”语句。但是，如果我只是使用香草 JS 怎么办？如果我在 vanilla jS 中使用 npm 包，是否必须使用 Webpack？
如果你想坚持使用 React。然后将它导入您的 main.js 或 index.js（无论您的应用程序入口点），但不需要手动将您的 main.js 导入您的 index.html（让 webpack 处理它）。从'typed.js'导入类型；
所以要在 Vanilla JS 项目中使用它（没有前端框架或任何东西），我必须利用 Webpack 来使用 NPM 包吗？我没有使用任何框架。我唯一的 JS 文件是 main.js，如上所示。
没有。要使用 NPM 包，您只需要安装 nodejs。 Webpack 是一个打包工具。在某些情况下，如果有可用的 CDN，则不需要 nodejs，然后直接导入 index.html 文件。在您的情况下，它是
好吧，不知道使用 npm 有什么问题，但我想我现在会使用 CDN