19

requireJSを使用してフォルダ全体を「require」することは可能ですか？

たとえば、大量のビヘイビアーjsファイルを含むビヘイビアーフォルダーがあります。require（['behaviors / *']、function（）{...}）;を簡単に使用できるようにしたいと思います。そのリストを最新の状態に保つ必要はなく、そのフォルダ内のすべてをロードします。圧縮して最適化すると、これらのファイルをすべてまとめることができますが、開発では、それらを個別に操作する方が簡単です。

4

5 に答える 5

24

ブラウザのjavascriptにはファイルシステムへのアクセス権がないため、ディレクトリでファイルをスキャンすることはできません。phpやrubyなどのスクリプト言語でアプリを構築している場合は、ディレクトリをスキャンしてファイル名をrequire（）呼び出しに追加するスクリプトを作成できます。

于 2011-05-05T05:35:28.167 に答える
8

このアプローチを推奨できるかどうかはわかりません。これを行うより明確な方法は、必要な機能を手動で「要求」/「エクスポート」することだと思います。例外は、エクスポートしたいファイルの「名前空間」がある場合です。以下の「Babel および ES6 モジュールのインポート宣言 (export-namespace-from)」または「Babel および ES6 モジュールのインポート宣言」を参照してください。

これらのソリューションは、意味のあるファイル構造があることも前提としています。つまり、ファイル名はその「必要な」*定義の一部になります。

ただし、それでもこれを行う必要がある場合は、探している動作を提供する既存のツールとメソッドがいくつかあります。

可能な解決策

Babel および ES6 モジュールのインポート宣言 (plugin-export-namespace-from)

  1. ES6 準拠の設定を行ってください。
  2. babel-plugin-proposal-export-namespace-from.babelrcを含めるようにファイルを更新する必要があります。
  3. 次のような構文を記述して、エクスポート名前空間プラグインを使用します。

共通/index.js

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

main.js

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

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

Babel および ES6 モジュールのインポート宣言 (plugin-wildcard)

  1. ES6 準拠の設定を行ってください。
  2. babel-plugin-wildcard.babelrcを含めるようにファイルを更新する必要があります。
  3. 次のような構文を記述して、ワイルドカード名前空間プラグインを使用します。

main.js

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

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

RequireJS (現在は古い)

  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']);
  1. 次に、grunt タスクを実行します。ファイルが生成されます。セットアップを変更してロードするnamespaces.js

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

  1. これにより、下にあるモジュールがsrc依存関係 glob パターン マッチングを使用できるようになりました。

require(['behaviors/**/*'], function (behaviors) { }

于 2013-11-29T05:21:22.307 に答える
5

これは古いことは知っていますが、私の解決策を共有したいと思います:

このソリューションには、JQuery が必要です

1) 「MyDirectory/」内のすべての js ファイルを一覧表示するbash スクリプトを作成し、 「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 MyDirectory/ThirdJavascriptFile

  • 私のスクリプトに問題があります！最後に余分な " " を置くと、混乱します! directoryContents.txtの末尾にある余分なスペースを必ず削除してください。

2) 次に、クライアント側の JS コードで:

  • テキストファイルを取得するために「GET」リクエストを実行します
  • 各エントリ (スペースで分割) に対して、そのファイルを「require」します。

.

$.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 を読み取るだけで、そのリストにそれぞれが必要です。

お役に立てれば！

于 2013-11-19T02:01:43.127 に答える
1

これを概念的にその場で行う方法は実際にはありません（私が知っていることです）。

ただし、いくつかの回避策があります。

使用gruntしてconcat、その巨獣を必要とするだけです...私は知っています、ちょっと嫌です。

私が思うより良い解決策は...次のように必要な階層を使用します。

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
        };
    };
});

protagonist「 」に注意してくださいfunction。これにより、使用前にモジュールを初期化できるため、' sandbox' -- この場合はappとglobals.

現実的には、あなたは持っていない/js/controllers/index.jsでしょう...おそらく、 「index」と呼ばれる（の兄弟）に隣接するディレクトリがあるよう/js/controllers/index/main.jsなものであるはずです。これにより、モジュールを特定のインターフェイスに拡張できるようになります。モジュールを簡単に交換して、インターフェイスを同じに保つことができます。/js/controllers/index/init.js/js/controllers/init.js

お役に立てれば！ハッピーコーディング！

于 2013-12-23T23:32:26.987 に答える