特定のモジュールをページにロードするために、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