web-dev-qa-db-ja.com

Browserifyはディレクトリ内のすべてのファイルを必要とする

私はBrowserify（および一般にJavaScriptビルドシステム）を初めて使用し、完全に混乱するところに到達しました。

私はビルドを行うためのGulpセットアップを行っていますが、これは常に正常に機能しており、最近はBrowserifyを使用してバンドルしています-ほとんどの場合、コードを個別のファイルに分けて、必要な場所でrequire() 。

私の問題は、別のモジュール内に必要な小さなモジュールがたくさんあるフォルダーがあり、それらすべての名前をハードコーディングしないようにしようとしていることです。すべてのファイルを要求する方法はありますか？

Bulkify と Folderify を使用してみましたが、機能しません。たとえば、Bulkifyでは、インストールされたパッケージはbulkifyと呼ばれ、node_modulesフォルダーにありますが、bulk-require、bulkifyパッケージのsub node_modulesフォルダーにあります。試してみると、BrowserifyはCannot find module 'bulk-require'...タイプのエラーでチョークを鳴らします。

この時点では、両方のインストール方法が機能しない理由（または、それらが私に役立つかどうか）がわからないので、混乱しています。私はそれらを私のGulpファイルで使用することになっていますか？または、モジュールの1つでそれらを使用して、Browserify中に呼び出されますか？

これが役立つ場合のこれに対する私のビルドタスクのスニペットを次に示します。

// Report Builder
gulp.task('script-builder', function() {

    // Unminified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/debug'));

    // Minified
    // **********************************************************
    browserify({entries: './resources/assets/js/report/builder.js'})
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .bundle()
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(source('builder.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(buffer())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(ext_replace('.min.js'))
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(uglify())
        .on('error', function (err) { console.log(err); this.emit('end'); })
        .pipe(gulp.dest('./public/js/dist'));

});

ここで何をしているのか分かりません。 require()呼び出しでパスをハードコーディングする必要があるのですか、それとももっと良い方法がありますか？

[〜＃〜]編集[〜＃〜]

bulkifyノードモジュールでbulk-requireがはっきりとわかります。

enter image description here

しかし、bulk-requireを要求しようとすると、窒息します。

module.exports = function(type, driver, node) {

    var propertiesContainer = '#property-container';

    var bulk = require('bulk-require');
    var mods = bulk(__dirname, ['properties/**/*.js']);

}

エラー：「/ path/to/my/project/resources/assets/js/report」からモジュール「bulk-require」が見つかりません

EDIT 2

require-globifyパッケージを使用してこの作業を行うことができました（ https://github.com/capaj/require-globify ）。私のJavaScriptでは、私は使用しました：

var properties = require('./properties/*.js', {mode: 'hash', resolve: ['path-reduce', 'strip-ext']});

それは拡張子またはパス接頭辞なしでファイル名としてキーを持つオブジェクトを返しました。

私のgulpfile.jsでこれを行いました：

browserify({
    entries: './resources/assets/js/report/builder.js',
    transform: ['require-globify']
})
.on('error', function (err) { console.log(err); this.emit('end'); })
.bundle()
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(source('builder.js'))
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(buffer())
.on('error', function (err) { console.log(err); this.emit('end'); })
.pipe(gulp.dest('./public/js/debug'));
javascriptnpmgulpbrowserify
19
Jeremy Harris

これは非常に簡単な作業です。 fs を使用すると、node_modulesフォルダーにアクセスするだけで、すべての依存関係を一度に動的に要求できます。

var normalizedPath = require("path").join(__dirname, "node_modules/bulkify");
require("fs").readdirSync(normalizedPath).forEach(function(file) {
  require("./node_modules/bulkify" + file);
});

この質問についてのより多くの答えを見つけることができます here

[〜＃〜] edit [〜＃〜]一般的な回答の謝罪私は、ファイルをBrowserifyに動的に要求することについての質問を少し誤解しました。

Require-globify は、問題に対するきちんとしたアプローチのようです。

この答えも見てみましょう Browserifyで動的に必要なモジュールをコンパイルする

5
vorillaz

私はそれを使ったことはありませんが、bulkifyはあなたがやりたいことをすると思います。

私はそれらを私のGulpファイルで使用することになっていますか？または、モジュールの1つでそれらを使用して、Browserify中に呼び出されますか？

はい、はい。

その要点は次のようなものだと思います。

gulpfile.js

var bulkify = require('bulkify');

browserify(...)
  .transform(bulkify)
  // ...

another-module.js（バンドルされたモジュール）

var bulk = require('bulk-require');
var a_bunch_of_small_modules = bulk(__dirname, ['somdir/**/*.js']);
a_bunch_of_small_modules.somedir.whatever();
3
JMM