Question

我如何加载仅可通过要求加载的库，而无需使用webpack，编译，翻译，丑化等。

让我们说：https://github.com/stutrek/scrollMonitor

该代码是纯正的javascript脚本，没有任何外部依赖关系，但是脚本不能放在头部。

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';

但这只会返回空对象。

感谢帮助。

Answer 1

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

该变体受库支持，但不应放在 head 中。只需尝试将其添加到 body 的末尾即可。全局变量scrollMonitor也应出现。

Answer 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并非如此。

Answer 3

该软件包包括一个后备全局变量，因此您可以执行以下操作：

import './scrollMonitor';

这使scrollMonitor在您使用的窗口对象上可用。

需要没有webpack等的模块

3 个答案: