1

特定のモジュールをページにロードするために、Factor-bundle で Browserify を使用しようとしています。

JS ソース ファイルを整理する方法は次のとおりです。

bower_compoments
├── jquery/...
├── foundation/...
└── [...]
static/src/js
├── common.js
├── home.js
└── other_page.js

ここに私のビルドフォルダがあります:

static/build/js
├── main.js // must be loaded on all pages: bundle of bower_compoments + common.js
├── home.js
└── other_page.js

home.html

<script type="text/javascript" src="static/build/js/main.js"></script>
<script type="text/javascript" src="static/build/js/home.js"></script>
<script> 
    // Trying to load and execute the module
    var home = require('home'); // Raise an error "Module not found"
    home();
</script>

other_page.html

<script type="text/javascript" src="static/build/js/main.js"></script>
<script type="text/javascript" src="static/build/js/other_page.js"></script>

ガルプファイル

var browserify = require('browserify');
var source = require('vinyl-source-stream');
var factor = require('factor-bundle');

gulp.task('build:scripts', function () {
    return browserify({
        basedir: "static/src/js/",
        entries: [
            './common.js',
            './home.js',
            './other_page.js'
        ],
        debug: true
    })
    .plugin(factor, {
        outputs: [
            'static/build/js/home.js',
            'static/build/js/other_page.js'
        ]
    })
    .bundle()
    //Pass desired output filename to vinyl-source-stream
    .pipe(source('main.js'))
    .pipe(gulp.dest('static/build/js/'));
});

そしてBrowserifyに関するpackage.sonの抜粋

"browser": {
  "jquery": "./bower_components/jquery/dist/jquery.js",
  "foundation": "./bower_components/foundation/js/foundation/foundation.js",
  "foundation-dropdown": "./bower_components/foundation/js/foundation/foundation.dropdown.js"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "jQuery": "$",
  "foundation": {
    "depends": [
      "jquery:$"
    ]
  },
  "foundation-dropdown": {
    "depends": [
      "foundation"
    ]
  }
},

ビルドは大丈夫です。しかし、ホームページをロードするとエラーが発生します:「Module not found 'home'」

私が間違っていることは何ですか?複数ページの Web サイトで browserify を使用するのは良い方法ですか?

完全なプロジェクトのレポを作成しました: https://github.com/JiDai/browserify-multipage

4

0 に答える 0