是否可以阻止 requireJS 自动添加 .js 文件扩展名?

Posted

技术标签:

【中文标题】是否可以阻止 requireJS 自动添加 .js 文件扩展名?【英文标题】:Is it possible to stop requireJS from adding the .js file extension automatically? 【发布时间】:2012-05-22 01:00:13 【问题描述】:

我正在使用 requireJS 来加载脚本。它有this detail in the docs:

用于模块名称的路径不应包含 .js 扩展名,因为路径映射可能是一个目录。

在我的应用程序中,我将所有脚本文件映射到配置路径中,因为它们是在运行时动态生成的(我的脚本以 order.js 之类的形式开始生命,但变成 order.min.b25a571965d02d9c54871b7636ca1c5e.js 之类的东西(这是一个哈希文件内容,用于缓存清除目的)。

在某些情况下,require 会在这些路径的末尾添加第二个 .js 扩展名。虽然我在服务器端生成动态路径然后填充配置路径,但我必须编写一些额外的 javascript 代码来从有问题的文件中删除 .js 扩展名。

阅读 requireJS 文档后,我真的不明白您为什么希望将路径映射用于目录。这是否意味着可以在一次调用中以某种方式加载整个目录的文件?没看懂。

有人知道是否可以强制要求停止将 .js 添加到文件路径中,这样我就不必绕过它了?

谢谢。

更新:根据要求添加了一些代码示例。

这是在我的 html 文件中(这是一个 Scala 项目,所以我们不能将这些变量直接写入 .js 文件):

foo.js.modules = 
    order               : '@Static("javascripts/order.min.js")',
    reqwest             : 'http://5.foo.appspot.com/js/libs/reqwest',
    bean                : 'http://4.foo.appspot.com/js/libs/bean.min',
    detect              : 'order!http://4.foo.appspot.com/js/detect/detect.js',
    images              : 'order!http://4.foo.appspot.com/js/detect/images.js',
    basicTemplate       : '@Static("javascripts/libs/basicTemplate.min.js")',
    trailExpander       : '@Static("javascripts/libs/trailExpander.min.js")',
    fetchDiscussion     : '@Static("javascripts/libs/fetchDiscussion.min.js")'
    mostPopular         : '@Static("javascripts/libs/mostPopular.min.js")'
;

然后在我的main.js

requirejs.config(
    paths: foo.js.modules
);

require([foo.js.modules.detect, foo.js.modules.images, "bean"], 
    function(detect, images, bean) 
        // do stuff
);

在上面的例子中,我必须使用字符串“bean”(它指的是需要路径)而不是我的直接对象(就像其他人使用foo.js.modules.bar)否则我会得到额外的.js

希望这是有道理的。

【问题讨论】:

你能提供一个你的 require 函数调用的例子吗?你在使用 require.config() 吗?你的设置是什么? 谢谢 - 在上面添加了一些代码。使用 require.config() 只是将路径推送到 require 中。 变量 bean 不会解析为任何东西(没有引号)。您必须使用完整的 foo.js.modules.bean 参考。就个人而言,我使用引用的形式,所以我不确定会发生什么。 不确定我是否遵循 - 我 am 将它与引号一起使用,除了在回调参数中,但我不希望它在那里成为字符串。当我使用 foo.js.modules.bean 时,它会添加额外的“.js”扩展名。 我现在明白了。这可能被认为是一个错误,但我总是从 requirejs.config -> 路径中的所有条目中省略“.js”。如果这样做,您应该能够使用 foo.js.modules.ID 引用或字符串“ID”,然而根据模块本身的导出方式,您可能会遇到问题。例如,我无法使用 reference 方法来导入 jQuery,因为 jQuery 在 id "jquery" 下导出自己,但 requirejs 不知道将其与 "js/lib/" 匹配jquery-1.7.1" 路径下的条目。 【参考方案1】:

如果您不想添加对 noext 的依赖,您也可以在路径中附加一个虚拟查询字符串,以防止附加 .js 扩展名,如下所示:

require.config(
    paths: 
        'signalr-hubs': '/signalr/hubs?noext'
    
);

这就是 noext 插件的作用。

【讨论】:

更好的解决方案 IMO,您无需在负载中添加另一个库。配置中只有六个额外的字符。 同意 - 这要简单得多。也恰好是我正在寻找的确切示例(SignalR)。谢谢! 有人知道为什么我们在配置中不能有选项吗? 我有这个类似的问题,所以我正在尝试你的 sol..我可以在配置中包含上面的路径,没有添加 noext 插件..还有我在哪里参考'signalr-hubs' 在? @BobStein-VisiBone 否。这是如何工作的,?noext 变为 ?noext.js,它仍然充当虚拟查询字符串。【参考方案2】:

requirejs'noext plugin:

在不附加“.js”扩展名的情况下加载脚本,对动态脚本很有用...

文档

检查examples 文件夹。您可能需要的所有信息都在 cmets 内部或示例代码本身。

基本用法

将插件放入baseUrl 文件夹(通常与 main.js 文件相同的文件夹)或创建插件位置的别名:

require.config(
    paths : 
        //create alias to plugins (not needed if plugins are on the baseUrl)
        async: 'lib/require/async',
        font: 'lib/require/font',
        goog: 'lib/require/goog',
        image: 'lib/require/image',
        json: 'lib/require/json',
        noext: 'lib/require/noext',
        mdown: 'lib/require/mdown',
        propertyParser : 'lib/require/propertyParser',
        markdownConverter : 'lib/Markdown.Converter'
    
);

//use plugins as if they were at baseUrl
define([
        'image!awsum.jpg',
        'json!data/foo.json',
        'noext!js/bar.php',
        'mdown!data/lorem_ipsum.md',
        'async!http://maps.google.com/maps/api/js?sensor=false',
        'goog!visualization,1,packages:[corechart,geochart]',
        'goog!search,1',
        'font!google,families:[Tangerine,Cantarell]'
    ], function(awsum, foo, bar, loremIpsum)
        //all dependencies are loaded (including gmaps and other google apis)
    
);

【讨论】:

【参考方案3】:

我在 node.js 中使用 requirejs 服务器端。 noext 插件对我不起作用。我怀疑这是因为它试图将 ?noext 添加到 url 并且我们有文件名而不是 urls 服务器端。

我需要将我的文件命名为 .njs 或 .model 以将它们与静态 .js 文件分开。希望作者将更新 requirejs 以不强制用户使用自动 .js 文件扩展名约定。

同时这里有一个禁用此行为的快速补丁。

要应用此补丁(针对 node_modules/requirejs/bin/r.js 的 2.1.15 版):

    保存在一个名为 disableAutoExt.diff 的文件中,然后打开一个终端 cd 路径/to/node_modules/ 补丁-p1 添加 disableAutoExt: true, 到你的 requirejs.config: requirejs.config(disableAutoExt: true,);

现在我们可以做 require(["test/index.njs", ...] ... 并重新开始工作。

将此补丁保存在 disableAutoExt.diff 中:

--- mod/node_modules/requirejs/bin/r.js 2014-09-07 20:54:07.000000000 -0400
+++ node_modules/requirejs/bin/r.js 2014-12-11 09:33:21.000000000 -0500
@@ -1884,6 +1884,10 @@
         //Delegates to req.load. Broken out as a separate function to
         //allow overriding in the optimizer.
         load: function (id, url) 
+            if (config.disableAutoExt && url.match(/\..*\.js$/)) 
+                url = url.replace(/\.js$/, '');
+            
+
             req.load(context, id, url);
         ,

补丁只是在 node_modules/requirejs/bin/r.js 的第 1887 行附近添加以下内容:

if (config.disableAutoExt && url.match(/\..*\.js$/)) 
    url = url.replace(/\.js$/, '');

更新:通过在代码中更深地移动 url 更改来改进补丁,因此在模块上调用 undef 后它不再导致挂起。需要undef,因为:

要在使用 node.js 开发时禁用模块缓存,请将其添加到您的主应用程序文件中:

requirejs.onResourceLoad = function(context, map)

    requirejs.undef(map.name);
;

【讨论】:

以上是关于是否可以阻止 requireJS 自动添加 .js 文件扩展名?的主要内容,如果未能解决你的问题,请参考以下文章

requirejs

快速理解RequireJs

关于requirejs和grunt压缩合并是否矛盾

requireJS的优化工具 ---- r.js

带有RequireJS的邮件

使用grunt完成requirejs的合并压缩和js文件的版本控制