需要没有 webpack 等的模块答案

【问题标题】：Require module without webpack etc需要没有 webpack 等的模块
【发布时间】：2019-09-04 06:53:25
【问题描述】：

如何在不使用 webpack、编译、traspilation、uglification 等的情况下加载只能通过 require 加载的库。

假设：https://github.com/stutrek/scrollMonitor

代码是vanilla javascript，没有外部依赖，但是脚本不能放在head里。

var scrollMonitor = require("scrollmonitor"); // if you're old school you can use the scrollMonitor global.

我的首选是：

<script src="./scrollMonitor.js"></script>

但这不起作用。避免 webpack 等的下一个最简单的选择是什么？

我尝试了 ES6 导入：

import * as scrollMonitor from './scrollMonitor.js';

但这只会返回空对象。

感谢您的帮助。

【问题讨论】：

您需要实现require。使用 WebPack。
@Quentin 我确实尝试过 WebPack，但我最终在 Firefox 中遇到了 SourceMaps 的问题：github.com/webpack/webpack/issues/1194 我真的想避免为浏览器提供与我在编码时看到的不同的代码。

标签： javascript webpack ecmascript-6 requirejs es6-modules

【解决方案1】：

该包包含一个后备全局，因此您可以这样做：

import './scrollMonitor';

这使得scrollMonitor 可用于您使用的窗口对象。

【讨论】：

【解决方案2】：

似乎可以使用getlibs package：

<!-- index.html -->
<html>
<body>
    <script src="https://unpkg.com/getlibs"></script>
    <script>
         System.import("./script.js");
    </script>
</body>
</html>

// script.js
console.log(require('scrollmonitor'));

工作示例：https://glitch.com/edit/#!/aromatic-flamingo

在上面的脚本中，scrollmonitor 是从https://unpkg.com/ 加载的，但是这种方法也适用于本地文件。我认为这完全解决了我的问题。

另一种解决方案似乎是 Pika-Web：

没有 Webpack 的未来

@pika/web 安装现代 npm 依赖项的方式允许它们在浏览器中本地运行，即使它们本身具有依赖项。而已。它不是构建工具，也不是捆绑器（无论如何，在传统意义上）。 @pika/web 是一个依赖安装时工具，可让您显着减少对其他工具的需求，甚至完全跳过 Webpack 或 Parcel。

这一切都归结为在性能、缓存效率和您能接受的复杂程度之间进行权衡。再说一次，这就是@pika/web 的全部要点：添加捆绑器是因为它对您的情况有意义，而不是因为您别无选择。

@pika/web 检查您的 package.json 清单中是否存在导出有效 ESM“模块”入口点的任何“依赖项”，然后将它们安装到本地 web_modules/ 目录。 @pika/web 适用于任何 ESM 包，即使是具有 ESM 和 Common.js 内部依赖项的包。

https://www.pikapkg.com/blog/pika-web-a-future-without-webpack

但是，它仅适用于有效的 ESM“模块”入口点。 scrollMonitor 不是这种情况。

【讨论】：

【解决方案3】：

我的首选是：
<script src="./scrollMonitor.js"></script>
但这不起作用。

库支持此变体，但不应将其放入 head。只需尝试将其添加到 body 的末尾。还应该出现全局变量scrollMonitor。

【讨论】：

我可能在做一些傻事，但它不起作用：jsfiddle.net/h37qps59