需要没有webpack等的模块

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了需要没有webpack等的模块相关的知识,希望对你有一定的参考价值。

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

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

代码是vanilla 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';

但这只返回空对象。

感谢帮助。

答案

我的首选方案是:

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

但这不起作用。

库中支持此变体,但不应将其置于头部。只是尝试将它添加到正文的末尾。全局变量scrollMonitor也应该出现。

另一答案

似乎可以使用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内部依赖项的ESM包。

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

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

以上是关于需要没有webpack等的模块的主要内容,如果未能解决你的问题,请参考以下文章

替换未调用 onAttach、onCreate、onCreateView 等的活动中的片段

webpack

webpack的基础,看懂webpack如何编译bundle everything

webpack之性能优化(webpack4)

前端模块打包之Webpack

即使不需要模块,Webpack 也会为 node_modules 中的文件提供“模块没有导出的成员...”错误