Snowpack 无法从 node_modules 导入 JavaScript答案

【问题标题】：Snowpack cannot import JavaScript from node_modulesSnowpack 无法从 node_modules 导入 JavaScript
【发布时间】：2021-07-25 11:44:29
【问题描述】：

我目前正在使用 Snowpack 构建/准备应用程序。我正在尝试导入作为dependencies（块）的一部分安装在package.json 文件中的JavaScript 库，但不知何故Snowpack 没有选择该库。

这是package.json 文件（相关内容的摘录）：

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "snowpack build",
    "preview": "snowpack dev"
  },
  "dependencies": {
    "impress.js": "1.1.0"
  },
  "devDependencies": {
    "snowpack": "3.3.7"
  },
  "engines": {
    "node": "14.x"
  }
}

snowpack.config.js 仅包含以下几行：

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  devOptions: {
    open: "none",
  },
  mount: {
    src: {
      url: "/",
    },
  },
};

我期待 Snowpack 将 impress.js 库与此 HTML 文件捆绑在一起：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script src="node_modules/impress.js/js/impress.min.js"></script>
    <script src="scripts/global.js" type="module"></script>
  </body>
</html>

有没有办法为此类事情配置 Snowpack？

【问题讨论】：

标签： javascript impress.js snowpack

【解决方案1】：

如果您只是想将 Impress 模块转换为 ESM，您是否考虑过尝试esinstall？

即

convert.mjs:

import {install} from 'esinstall';
await install(['impress.js'], {});

node convert.mjs

然后在您的 HTML 文件中：

 <script src="web_modules/impress.js"></script>

【讨论】：

当提供某些提示 (type="module") 时，我实际上希望 Snowpack 能够在幕后做这些事情。

【解决方案2】：

如果有人遇到与此类似的情况，我发现捆绑Impress.js（以及可能任何其他已经/尚未模块化的库）的方式是在 JavaScript 文件中仅import 它（注意HTML script 标签中的type="module"）：

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script src="scripts/global.js" type="module"></script>
  </body>
</html>

import "impress.js";

impress(); // ...bootstraps/initializes Impress.js

【讨论】：