Question

比如说，有人写了一个很棒的jQuery插件，我想在我的网站上使用，但它不是AMD。如何将其添加到requireJS？出于演示目的，假装这个插件被称为“codeFormatter”，它接受任何<pre>标记并对其进行格式化，使得每一行都获得索引。显然，codeformatter需要jQuery才能工作。

让我们说在添加codeFormatter之前，我的页面上有一个<pre>部分，如下所示：

var foo = function() {
    console.log("foo");
}

让我们说这个jQuery codeformatter是通过以下方式调用和传播的（传统上）：

<script src="scripts/lib/jquery.js"></script>
<script src="scripts/codeformatter.js"></script>
<script>
    $("pre").codeFormatter();
</script>

添加codeFormatter后：

1. var foo = function() {
2.     console.log("foo");
3. }

无论如何，由于这个codeFormatter.js插件是由其他人远程维护的，例如存储在github上，因此我无需复制代码然后使用define()方法。

使用shim或define或require等将codeFormatter.js放入requireJS的最佳做法是什么？

Answer 1

您的要求非常常见，这就是RequireJS文档更详细地概述jQuery插件的原因。更详细地阅读shim配置选项 - http://requirejs.org/docs/api.html#config-shim

Answer 2

如果插件的大小很小，建议将几个插件连接成一个JS文件，然后在jQuery之后加载。

如果插件是大文件（例如jquery-ui）并且我不想连接它们或者想要从CDN中提取它们，我会定期滚动一个命名定义，如下所示：

<script src="path/to/amd_loader.js"></script>
<script src="path/to/jquery.js"></script>
<script>

define(
    'jqueryplugins'
    , [
        'jquery'
        , 'js!plain/js/fileA.js' // loading through "js" plugin
        , 'actually/an/amd/compatible/module'
        , 'js!plain/js/fileB.js' // loading through "js" plugin
    ]
    // because plugins AUGMENT $, no point returning them separately
    // just return back the augmented jQuery reference.
    , function($){return $} 
)

</script>
...
<script>

require(
    ['jqueryplugins', 'path/to/mycode']
    , function($, mycode){
        mycode($)
    }
)

</script>

注意，虽然jQuery是一个AMD模块，但我并不打算通过AMD加载器对它进行初始获取。它将自己注册为命名模块，我稍后会使用它。（请参阅https://stackoverflow.com/a/14298476/366864）这样就无需复杂的shim和path配置。如果你没有手动命令jQuery的预加载，你将不得不处理需要在插件之前通过其他方式命令jquery加载。

将第三方jQuery插件添加到requireJS的最佳实践？

2 个答案: