すべてのjsファイルをすばやく簡単に参照できるプラグインを探しています

Question

私は自分のプロジェクトで複数のjsファイルを扱っています。だから、私は任意のjsファイルfast and easy（任意のコンパイラをバックグラウンドでインストールする必要はありません）を参照できるプラグインを探しています。ここで

コーナーです：

通常、私はそれを使用する必要があります毎回：

<script src="/path/app1.js"></script> 
<script src="/path/app2.js"></script> 
<script src="/path/app3.js"></script> 
<script src="/path/app4.js"></script> 
<script src="/path/app5.js"></script> 
<script src="/path/app6.js"></script> 
<script src="/path/app7.js"></script> 
<script src="/path/app8.js"></script> 
<script src="/path/app9.js"></script> 
<script src="/path/app10.js"></script> 
<!-- ... --> 

だから、ひどい^^！

次に、Google検索を使用しようとしましたが、requirejsが見つかりました。しかし、私はすべてのJSファイル（オブジェクト名とJSパス）のための設定への必要があるためfasterが、すべてで使用することはありません。

requirejs.config({ 
    baseUrl: 'js/lib', 
    paths: { 
     app1: 'app1-1.1.0', 
     app2: 'app2-1.1.0', 
     app3: 'app3-1.1.0', 
     app4: 'app4-1.1.0', 
     app5: 'app5-1.1.0', 
     app6: 'app6-1.1.0', 
     app7: 'app7-1.1.0', 
     app8: 'app8-1.1.0', 
     app9: 'app9-1.1.0', 
     app10: 'app10-1.1.0' 
     // ... 
    } 
}); 

だから、私は50個の以上のjsファイルを持っている場合のことが起こるでしょうか？ 50個のファイルに対して50個のオブジェクトを定義する必要があります。新しいバージョンにアップグレードした後、設定でファイル名を編集する必要があります... blabla

次に、もう一度検索しようとしましたが、別の方法が見つかりました。 import and export keywordsを使用します。しかし、標準的な構文ではなく、バックグラウンドでコンパイラが必要です。

私はこのようなプラグインを探しています：

// window.Animal is 'undefined' here 

using('Animal'); // using is a global function while 'Animal' is a parameter 

// window.Animal is an object here 

class Cat extends Animal { 
    constructor(name) { 
     this.name = name; 
    } 
    Speak() { 
     return 'meow meow'; 
    } 
}; 

は、そのような任意のプラグインはありますか？ありがとうございました！

Answer 1

私は自分のプロジェクトで複数のjsファイルを扱っています。だから、私は任意のjsファイルを素早く簡単に参照できるプラグインを探しています（バックグラウンドでコンパイラをインストールする必要はありません）。

WebpackまたはBrowserifyなどのモジュールバンドラを使用することを検討してください。多かれ少なかれ同じ機能を実行するので、これらの2つのパッケージバンドラでは、var package = require('package')などのコードにCommonJSモジュールを使用できます。あなたが "バンドル"タスクをwebpack経由で直接実行するか、browserifyの場合はgulpまたはgruntを介して実行します。それぞれのバンドラーは、あなたが提供するいくつかのエントリーポイントファイルで始まり、次のように含めることができる 'bundle.js'を自動的に作成します。<script src="/path/bundle.js"></script>ここで

は、開始するには良い場所です - >Webpack Tutorial

Answer 2

私は、ディレクトリのファイルからコードスニペットを生成する簡単な関数をwritedしています。修正されたバージョン：

var fs = require('fs'); 

function getPathScripts(path) { 
    var fnames, 
     scripts; 

    fnames = fs.readdirSync(path); 

    console.log(fnames); 
    // [ 'app1.js', 'app2.js', 'app3.css' ] 

    scripts = fnames 
     .filter(function (fname) { 
      return fname.match(/.js$/); // add your filter condition 
     }) 
     .map(function (fname) { 
      return `<script src="${ path }/${ fname }"></script>` 
     }).join('\n'); 

    console.log(scripts); 
    //<script src="./path/app1.js"></script> 
    //<script src="./path/app2.js"></script> 

    return scripts; 
} 

var output = getPathScripts('./path'); 

fs.writeFileSync('output.js', output); // write content to a file