作为前端开发者，我们经常需要使用第三方库来提高项目的开发效率和代码质量。npm 是 JavaScript 的包管理工具，可以方便的安装和管理包。而 browserify 可以让我们使用 CommonJS 模块系统在浏览器中使用 npm 包。但是，在某些情况下，我们不能或不想使用 npm 来安装依赖。这时，cdnjs 可以帮助我们解决这个问题。
cdnjs 简介
cdnjs 是一个开源的 CDN 服务，它提供了大量的 JavaScript 库和资源。这些资源是托管在全球不同地区的服务器上，它们可以被浏览器从距离最近的服务器上加载，从而提高网页的访问速度和用户体验。
browserify-cdnjs 简介
browserify-cdnjs 是一个可以让我们在浏览器中使用 cdnjs 库的 npm 包。它可以让我们像使用 npm 包一样使用 cdnjs 库，而无需在本地安装它们。
当我们使用 browserify-cdnjs 时，它会将 cdnjs 库打包成 browserify 模块。这样，我们就可以像使用其他 npm 包一样在浏览器中使用 cdnjs 库了。
安装和使用
安装
可以使用 npm 来安装 browserify-cdnjs，命令如下：
npm install browserify-cdnjs --save-dev
使用
在使用前，我们需要确保已经在项目中安装了 browserify 和 vinyl-source-stream，可以通过以下命令来安装：
npm install browserify vinyl-source-stream --save-dev
安装完成后，在脚本中引入模块：
var browserify_cdnjs = require('browserify-cdnjs');然后，我们可以通过调用 browserify_cdnjs 方法来获取 cdnjs 库的 browserify 模块：
browserify_cdnjs('jquery@3.6.0', function(err, file) {
if (err) {
console.error(err);
return;
}
console.log(file);
});这个例子中，我们获取了 cdnjs 上的 jquery 库的 browserify 模块。我们可以将这个模块和其他模块打包成一个包含所有依赖的 JS 文件，例如：
-- -------------------- ---- ------- --- ---------- - ---------------------- --- ------ - ------------------------------- ------------ ---------------- ------------------------------------------ - ------- -------- -- --------- -------------------------- --------------------------
在这个例子中，我们使用了 gulp 来打包文件，但是你也可以使用其他打包工具来完成这个操作。
示例代码
下面是一个完整的示例，演示了如何使用 browserify-cdnjs 打包一个包含 jquery 和 lodash 依赖的 JS 文件。
-- -------------------- ---- ------- --- ---------- - ---------------------- --- ------ - ------------------------------- --- ---------------- - ---------------------------- ------------ ---------------- ------------------------------------------ - ------- -------- -- -------------------------------------------- - ------- -------- -- --------- -------------------------- --------------------------
现在，我们已经成功地使用 browserify-cdnjs 将 cdnjs 库打包成了 browserify 模块，并在浏览器中使用它们了。
总结
browserify-cdnjs 可以方便地帮助我们在浏览器中使用 cdnjs 库，而无需在本地安装它们。它可以极大地提高项目的开发效率和代码质量。
在使用 browserify-cdnjs 时，我们需要先安装它，并确保已经在项目中安装了 browserify 和 vinyl-source-stream。然后，我们就可以像使用其他 npm 包一样，使用 browserify-cdnjs 来获取 cdnjs 库的 browserify 模块。
虽然 cdnjs 提供了很多 JavaScript 库和资源，但是并不是所有的库都可以在 cdnjs 上找到。在这种情况下，我们仍然需要使用其他方式来管理依赖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5319