自动捆绑外部javascript库

Bundle external javascript libraries automatically

本文关键字：javascript 外部更新时间：2023-09-26

我经常看到以浏览器为中心的javascript库带有通过npm安装的选项。

为什么要用npm而不是<script src="cdn-url"></script>来安装它呢?

我正在加载许多库，所以我想这可能是一个好主意来获取这些文件，所以我不做那么多url请求(即使所有的请求都是针对cdn)。

我可以通过npm安装，然后使用<script src='/node_modules/...'></script>，但然后我需要使用express.static()或类似的东西使这些路径公开访问。

我知道我可以使用webpack, browserify等，但是当我只想自动将几个外部库捆绑到一个文件中时，它们似乎过于复杂。

在这种情况下使用npm的目的是让你自动获得更新。您可以捆绑以减少请求的数量，并且只包含一个脚本标记。

但是当我只想将几个外部库自动捆绑到一个文件中时，它们似乎过于复杂。

不幸的是，这很复杂。如果不是这样就好了。此外，在更新库时还需要考虑浏览器缓存之类的问题。如果您有一个供应商库包，那么您必须在更新时手动使用查询字符串缓存。因此，为了简化这个过程，webpack为您完成了这一切。

我将移动到Webpack和使用CommonsChunkPlugin来创建一个供应商构建。

要完全自动化一切，将其与Html Webpack Plugin结合使用，以自动添加脚本标签和带散列的cache-bust。