在前端开发中，为了充分利用已有的 JavaScript 库，我们常常需要引入一些第三方库。而引入库的方式又千奇百怪：有的以直接 script 导入的方式使用，有的以 AMD （Asynchronous Module Definition）形式使用，有的则需要我们手写一些打包配置以 CommonJS 形式使用。这样就给开发带来了不少麻烦。
而 @jokeyrhyme/promised-requirejs 就是一款能够封装这些繁琐、多样的引用过程并转换为 Promise 形式的 npm 包，方便我们对第三方库进行灵活而高效的调用。
安装
在使用该 npm 包前，需要先安装这个包。通过 npm 安装即可，步骤如下：
npm install @jokeyrhyme/promised-requirejs
使用方法
引入
在项目中引入该 npm 包，采用 CommonJS 引入方式：
const promisedRequire = require('@jokeyrhyme/promised-requirejs');AMD 形式的第三方库的引用
我们先了解一下 AMD 的引入方式是怎样的。
以引用 underscore 库为例，我们可以在我们的 HTML 文件中这样调用：
<script src="path/to/underscore.js" data-amd="true"></script> <!-- 这里注意，要在 script 标签中加入 data-amd="true" -->
这样，我们就可以在 JavaScript 代码中使用 requireJS 的 require 方法调用：
require(['underscore'], function (_) {
// 这里就可以使用 underscore 库啦
});那么我们通过 @jokeyrhyme/promised-requirejs 调用 underscore 库的方法也很简单：
promisedRequire('underscore', '_').then((_) => {
// 这里也可以使用 underscore 库啦
});直接 script 导入的第三方库的引用
以引用 jQuery 库为例，我们可以在我们的 HTML 文件中这样调用：
<script src="path/to/jquery.js"></script>
这样，我们就可以在 JavaScript 代码中使用 jQuery 变量调用：
$(function() {
// 这里就可以使用 jQuery 库啦
});那么我们通过 @jokeyrhyme/promised-requirejs 调用 jQuery 库的方法也很简单：
promisedRequire('jquery', '$').then(($) => {
// 这里也可以使用 jQuery 库啦
});Promise 对象
值得一提的是，@jokeyrhyme/promised-requirejs 还是以 Promise 的形式来使用的。
我们在调用 promisedRequire 方法时，它会返回 Promise 对象。当 AMD 模块或者 script 脚本成功加载后，Promise 对象就会被 resolved。如需捕获错误，只要在 Promise 对象中的 catch 方法内。
下面是 example：
promisedRequire('jquery', '$').then(($) => {
$('body').append('<h1>Hello world</h1>')
}).catch((err) => {
console.log('Oh no!', err);
});这个例子很好理解，如果加载 jquery 库成功，我们就可以在 body 中添加一行 "Hello world" 的标题，如果出现错误，则会打印错误信息。
总结
通过封装 CommonJS 和 AMD 形式的引用方式，@jokeyrhyme/promised-requirejs 将原本复杂、繁琐的使用过程转化为了动态、灵活的 Promise 形式，让我们在使用第三方库时更高效，更简单。相信如果你在开发中遇到了引用问题，这一篇教程能够给你提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442ce