如何在单个文件中加入两个以上分离的 JS 库
How to join two+ separated JS libraries in a single file
我有一些库（比如语义 ui、jquery...），我通常直接从 CDN 单独加载到我的 <HEAD> 标签中，每个库都有自己的<SCRIPT> 标签。
然后我尝试打开每个 JS 文件的内容，复制每个文件并将每个内容附加到本地单个空白 JS 文件。然后我将这个单个文件导入到我的项目中。好的，它工作正常并且在控制台上没有错误。但是有些东西不工作。
检查 Chrome Dev Tools 的 NETWORK 选项卡，我发现这些库还尝试动态下载许多 css/image 文件。浏览器尝试从我的本地域而不是 CDN 下载这些资源——当然。所以我也必须将所有这些文件移动到我的本地服务器。
但我的问题是：无论如何我可以使用类似于 BASE 标签但脚本的东西吗？
例如，我的 single.js 会是这样的：
base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF JQUERY LIBRARY
//...
base_download = 'cdn.jsdelivr.com';
//HERE COMES THE CONTENT OF SEMANTIC UI LIBRARY
//...
base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF THE ANIMATE JS LIBRARY
//...
这样浏览器就可以正确的知道去哪里下载每个js代码请求的内容
如果我不清楚，我很抱歉，我在这里澄清你需要的一切！
根据这个问题和您的 other question，我认为您可能误解了 CDN 的用途。
在这个问题中，您说您想要复制托管在 CDN 上的代码，将其统一到一个资源中，然后 您自己 托管。那不是问题。但是，这样做的方法不是使用 CDN 托管文件，而是使用实际的库源并通过 webpack、browserify 或 rollup 等捆绑器构建您自己的捆绑包。
这些打包器在构建时会考虑您现在遇到的问题。静态资源要么正确设置为相对资源，要么内联添加到包中。
此外，在您的一条评论中，您说：
downloading a single file is way faster than downloading 10 individual
JS files for 10 different libraries. For each library the browser has
to initiate a request, domain resolution and so on. Joining JS files
make it load much faster and also PageSpeed Insights give you much
better score when importing less JS files
如果您必须实际下载资源，则为真。正如我在您的其他问题中提到的那样，CDN 的重点是尝试制作它，这样您就不必在每次访问不同的网站时都下载库的副本。相反，如果 站点 A 和 站点 B 都使用 somelib@2.0.0，并且都加载通过使用带有 src: <script src="http://some.cdn.com/somelib@2.0.0"></script> 的脚本来获取资源，无论您首先访问哪个站点都会让您的用户加载该脚本，并且每当您的用户访问第二个站点时，浏览器都会说 "I already have that resource cached, I'll just use that"。
这为您的用户节省了一次网络调用，这意味着没有请求开销，只有浏览器意识到它已经拥有资源所需的开销。
我有一些库（比如语义 ui、jquery...），我通常直接从 CDN 单独加载到我的 <HEAD> 标签中，每个库都有自己的<SCRIPT> 标签。
然后我尝试打开每个 JS 文件的内容，复制每个文件并将每个内容附加到本地单个空白 JS 文件。然后我将这个单个文件导入到我的项目中。好的，它工作正常并且在控制台上没有错误。但是有些东西不工作。
检查 Chrome Dev Tools 的 NETWORK 选项卡，我发现这些库还尝试动态下载许多 css/image 文件。浏览器尝试从我的本地域而不是 CDN 下载这些资源——当然。所以我也必须将所有这些文件移动到我的本地服务器。
但我的问题是：无论如何我可以使用类似于 BASE 标签但脚本的东西吗？
例如，我的 single.js 会是这样的：
base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF JQUERY LIBRARY
//...
base_download = 'cdn.jsdelivr.com';
//HERE COMES THE CONTENT OF SEMANTIC UI LIBRARY
//...
base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF THE ANIMATE JS LIBRARY
//...
这样浏览器就可以正确的知道去哪里下载每个js代码请求的内容
如果我不清楚，我很抱歉，我在这里澄清你需要的一切！
根据这个问题和您的 other question，我认为您可能误解了 CDN 的用途。
在这个问题中，您说您想要复制托管在 CDN 上的代码，将其统一到一个资源中，然后 您自己 托管。那不是问题。但是，这样做的方法不是使用 CDN 托管文件，而是使用实际的库源并通过 webpack、browserify 或 rollup 等捆绑器构建您自己的捆绑包。
这些打包器在构建时会考虑您现在遇到的问题。静态资源要么正确设置为相对资源，要么内联添加到包中。
此外，在您的一条评论中，您说：
downloading a single file is way faster than downloading 10 individual JS files for 10 different libraries. For each library the browser has to initiate a request, domain resolution and so on. Joining JS files make it load much faster and also PageSpeed Insights give you much better score when importing less JS files
如果您必须实际下载资源，则为真。正如我在您的其他问题中提到的那样，CDN 的重点是尝试制作它，这样您就不必在每次访问不同的网站时都下载库的副本。相反，如果 站点 A 和 站点 B 都使用 somelib@2.0.0，并且都加载通过使用带有 src: <script src="http://some.cdn.com/somelib@2.0.0"></script> 的脚本来获取资源，无论您首先访问哪个站点都会让您的用户加载该脚本，并且每当您的用户访问第二个站点时，浏览器都会说 "I already have that resource cached, I'll just use that"。
这为您的用户节省了一次网络调用，这意味着没有请求开销，只有浏览器意识到它已经拥有资源所需的开销。