requireJS 整个文件夹

Question

是否可以使用 requireJS“请求”整个文件夹。

例如，我有一个行为文件夹，其中包含大量行为 js 文件。我真的很希望能够简单地使用 require(['behaviors/*'], function() {...});加载该文件夹中的所有内容，而不必保持该列表最新。一旦压缩和优化，我会将所有这些文件集中在一起，但对于开发来说，单独使用它们会更容易。

Answer 1

浏览器中的 javascript 没有文件系统访问权限，因此它无法扫描目录中的文件。如果您使用 php 或 ruby​​ 等脚本语言构建应用程序，您可以编写一个脚本来扫描目录并将文件名添加到 require() 调用中。

Answer 2

我不知道我是否可以再推荐这种方法。我认为更明确的方法是手动“要求”/“导出”您需要的功能。我认为例外的是，如果您有要导出的文件的“命名空间”，请参见下面的“Babel 和 ES6 模块导入声明（export-namespace-from）”或参见下面的“Babel 和 ES6 模块导入声明”。

这些解决方案还假设您有一个有意义的文件结构 - 其中文件名成为“require”* 定义的一部分。

但是，如果您仍然需要执行此操作，有一些现有的工具和方法可能会提供您正在寻找的行为。

---

可能的解决方案

Babel 和 ES6 模块导入声明 (plugin-export-namespace-from)

1. 设置为 符合 ES6。
2. 您需要更新您的 .babelrc 文件以包含 babel-plugin-proposal-export-namespace-from。
3. 通过编写如下语法来使用导出命名空间插件：

common/index.js

export * from './common/a'; // export const a = false;
export * from './common/b'; // export const b = true;

ma​​in.js

import { a, b } from './common';

console.log(a); // false
console.log(b); // true

Babel 和 ES6 模块导入声明（插件通配符）

1. 进行ES6 兼容的设置。
2. 您需要更新您的 .babelrc 文件以包含 babel-plugin-wildcard 。
3. 通过编写如下语法来使用通配符命名空间插件：

ma​​in.js

import { a, b } from './common/*'; // imports './common/a.js' and './common/b.js'

console.log(a); // false
console.log(b); // true

RequireJS (Now Outdated)

1. 下载并安装 require-wild npm install require-wild
2. 配置声明如下，

    grunt.initConfig({
        requireWild: {
            app: {
                // Input files to look for wildcards (require|define)
                src: ["./**/*.js"], 

                // Output file contains generated namespace modules
                dest: "./namespaces.js", 

                // Load your require config file used to find baseUrl - optional
                options: { requireConfigFile: "./main.js" }
            }
        }
    }); 
    
    grunt.loadNpmTasks("require-wild");
    
    grunt.registerTask('default', ['requireWild']);

3. 然后运行 ​​grunt 任务。将生成您的文件。修改您的设置以加载 namespaces.js

require(['namespaces'], function () { ... });

4. 现在允许 src< 下的模块/code> 使用依赖项全局模式匹配。

require(['行为/**/*'], 函数(行为) { }

Answer 3

我知道这已经过时了，但我想分享我的解决方案：

对于此解决方案，您需要 JQuery

1) 创建一个 bash 脚本，它将列出所有 js 文件
“MyDirectory/”，然后将其保存到“directoryContents.txt”：

#!/bin/bash
  #Find all the files in that directory...
  for file in $( find MyDirectory/ -type f -name "*.js" )
        do
          fileClean=${file%.js} #Must remove .js from the end!
          echo -n "$fileClean " >> MyDirectory/directoryContents.txt
        done

• 文件将如下所示：

MyDirectory/FirstJavascriptFile MyDirectory/SecondJavascriptFile
我的目录/ThirdJavascriptFile

• 我的脚本有问题！最后多加一个“”，这会搞乱一切！确保在 directoryContents.txt 末尾删除多余的空间

2) 然后在客户端 JS 代码中：

• 执行“GET”请求来检索文本
• 文件每个条目（由空格分隔），“需要”该文件：

.

$.get( "MyDirectory/directoryContents.txt", {}, function( data ) {
    var allJsFilesInFolder = data.split(" ");
    for(var a=0; a<allJsFilesInFolder.length; a++)
    {
        require([allJsFilesInFolder[a]], function(jsConfig) 
        {
            //Done loading this one file
        });
    }
}, "text");

我遇到了这个代码没有在其他代码之前完成的问题，所以这是我的扩展答案：

define([''], function() {

return {

    createTestMenu: function() 
    {
        this.loadAllJSFiles(function(){
            //Here ALL those files you need are loaded!
        });
    },

    loadAllJSFiles: function(callback)
    {   
        $.get( "MyDirectory/directoryContents.txt", {}, function( data ) {
            var allJsFilesInFolder = data.split(" ");
            var currentFileNum = 0;
            for(var a=0; a<allJsFilesInFolder.length; a++)
            {
                require([allJsFilesInFolder[a]], function(jsConfig) 
                {
                    currentFileNum++;
                    //If it's the last file that needs to be loaded, run the callback.
                    if (currentFileNum==allJsFilesInFolder.length)
                    {
                        console.log("Done loading all configuration files.");
                        if (typeof callback != "undefined"){callback();}
                    }
                });
            }
        }, "text");
    }
}
});

我最终所做的是每次我的 Node 服务器启动时，它都会运行 bash 脚本，填充 directoryContents.txt。然后我的客户端只读取directoryContents.txt 文件列表，并需要该列表中的每个文件。

希望这有帮助！

Answer 4

实际上没有一种方法可以在概念上动态执行此操作（据我所知）。

不过，有一些解决方法：

使用 grunt 和 concat< /code> 然后只需要那个庞然大物...我知道，有点糟糕。

我认为更好的解决方案...使用如下所示的 require 层次结构：

require('/js/controllers/init', function(ctrls){
    ctrls(app, globals);
});

// /js/controllers/init.js
define('js/controllers/index', 'js/controllers/posts', function(index, posts){
    return function protagonist(app, globals){
        var indexModule = index(app, globals);
        var indexModule = posts(app, globals);

        return app || someModule;
    };
});

// /js/controllers/index.js
define('js/controllers/index', 'js/controllers/posts', function(index, posts){
    return function protagonist(app, globals){
        function method1(){}
        function method2(){}

        return {
           m1: method1,
           m2: method2
        };
    };
});

请注意“主角”function。这允许您在使用模块之前对其进行初始化，因此现在您可以传入“sandbox”——在本例中为 app 和 globals。

实际上，您不会有 /js/controllers/index.js ...它可能应该类似于 /js/controllers/index/main.js 或 < code>/js/controllers/index/init.js 这样就有一个与 /js/controllers/init.js 相邻的目录（其同级目录）称为“index”。这将使您的模块可扩展到给定的接口——您可以简单地交换模块并保持接口相同。

希望这有帮助！快乐编码！

Answer 5

我写了一个库来解决这个问题。最终，其他人出现并改进了我的库，如下：

https://github.com/smartprocure/ Directory-metagen

你可以将我的 lib 与 Gulp 或其他任何东西一起使用 - 它为你的项目生成元数据，并且 RequireJS 可以使用该元数据从文件系统中获取所需的文件。

使用这个库将生成一个看起来像这样的 RequireJS 模块：

define(
    [
        "text!app/templates/dashboardTemplate.ejs",
        "text!app/templates/fluxCartTemplate.ejs",
        "text!app/templates/footerTemplate.ejs",
        "text!app/templates/getAllTemplate.ejs",
        "text!app/templates/headerTemplate.ejs",
        "text!app/templates/homeTemplate.ejs",
        "text!app/templates/indexTemplate.ejs",
        "text!app/templates/jobsTemplate.ejs",
        "text!app/templates/loginTemplate.ejs",
        "text!app/templates/overviewTemplate.ejs",
        "text!app/templates/pictureTemplate.ejs",
        "text!app/templates/portalTemplate.ejs",
        "text!app/templates/registeredUsersTemplate.ejs",
        "text!app/templates/userProfileTemplate.ejs"
    ],
    function(){

        return {

            "templates/dashboardTemplate.ejs": arguments[0],
            "templates/fluxCartTemplate.ejs": arguments[1],
            "templates/footerTemplate.ejs": arguments[2],
            "templates/getAllTemplate.ejs": arguments[3],
            "templates/headerTemplate.ejs": arguments[4],
            "templates/homeTemplate.ejs": arguments[5],
            "templates/indexTemplate.ejs": arguments[6],
            "templates/jobsTemplate.ejs": arguments[7],
            "templates/loginTemplate.ejs": arguments[8],
            "templates/overviewTemplate.ejs": arguments[9],
            "templates/pictureTemplate.ejs": arguments[10],
            "templates/portalTemplate.ejs": arguments[11],
            "templates/registeredUsersTemplate.ejs": arguments[12],
            "templates/userProfileTemplate.ejs": arguments[13]
        }
    });

然后，您可以像这样在前端中 require 模块：

var footerView = require("app/js/jsx/standardViews/footerView");

但是，正如您所看到的，这太冗长了，所以神奇的方法如下：

命名上面的依赖项和大家一样！

现在您可以这样做：

var allViews = require('allViews');
var footerView = allViews['standardViews/footerView'];

要求整个目录有两个优点：

（1）在生产中，使用 r.js 优化器，您可以指向一个依赖项（模块 A），然后它可以轻松跟踪代表 A 的所有依赖项 在开发中的整个目录

(2) 中，您可以预先要求整个目录，然后使用同步语法来要求依赖项，因为您知道它们已经被加载

享受“RequireJS-Metagen”

https://github.com/smartprocure/directory-metagen

https://www.npmjs.com/package/requirejs-metagen

https://github.com/ORESoftware/requirejs-metagen