43
これはやや長いですが、混乱を説明するためにコード例が必要になります。その後、私は次のための答えに興味を持っています：複数のgrunt-browserifyバンドルで相対パスエイリアスを管理するにはどうすればよいですか？
- は、どのように私の代わりに
require('../../src/module')またはrequire('./module')のrequire('module')を使用していますか？ ./index.jsをspec/specs.jsに再利用するにはどうすればいいですか？ （そして、入力モジュールとしてsrc/app.jsが実行されないようにする）。
すでにいくつかのブラウザベースのプロジェクトを開始しており、browserifyとgruntが大好きです。しかし、各プロジェクトは私の開発/学習曲線の同じポイントで死ぬ。ミックスにテストを追加し、2つのbrowserifyバンドル（とspec/specs.js）を管理しなければ、システム全体が崩れます。私が説明します：
私はgrunt-browserifyを使用して、私の最初のディレクトリを設定します。
.
├── Gruntfile.js
├── index.js (generated via grunt-browserify) [1]
├── lib
│ ├── jquery
│ │ └── jquery.js [2]
│ └── jquery-ui
│ └── jquery-ui.js [3]
├── spec
│ ├── specs.js (generated via grunt-browserify) [4]
│ └── src
│ ├── spec_helper.js (entry)
│ └── module_spec.js (entry)
└── src
├── app.js (entry)
└── module.js
- 1つのエントリファイル（
src/app.js）を使用し、すべての必要モジュールをバンドルするコードの散歩を行います。 - browserify-shimから別名
jqueryを使用します。 - シームなしで
jquery-uiにエイリアスされています（var $ = require('jquery')の後に必要）。 spec/srcのすべてのヘルパーファイルとスペックファイルをエントリモジュールとして使用します。
：
browserify: {
dist: {
files: {
'index.js': ['src/app.js']
}
}
}
// in app.js
var MyModule = require('./module'); // <-- relative path required?!
ハッピー
今追加jqueryの：
browserify: {
options: {
shim: {
jquery: {
path: 'lib/jquery/jquery.js',
exports: '$'
}
},
noParse: ['lib/**/*.js'],
alias: [
'lib/jquery-ui/jquery-ui.js:jquery-ui'
]
},
dist: {
files: {
'index.js': ['src/app.js']
}
}
}
// in app.js
var $ = require('jquery');
require('jquery-ui');
var MyModule = require('./module');
ハッピー
今追加スペック：
options: {
shim: {
jquery: {
path: 'lib/jquery/jquery.js',
exports: '$'
}
},
noParse: ['lib/**/*.js'],
alias: [
'lib/jquery-ui/jquery-ui.js:jquery-ui'
]
},
dist: {
files: {
'app.js': 'src/app.js'
}
},
spec: {
files: {
'spec/specs.js': ['spec/src/**/*helper.js', 'spec/src/**/*spec.js']
}
}
// in app.js
var $ = require('jquery');
require('jquery-ui');
var MyModule = require('./module');
// in spec/src/module_spec.js
describe("MyModule", function() {
var MyModule = require('../../src/module'); // <-- This looks like butt!!!
});
悲しい
要約する：どのように私は...
- 利用
require('module')の代わりに、require('../../src/module')またはrequire('./module')？ ./index.jsをspec/specs.jsに複製しないでください。 （そして、入力モジュールとしてsrc/app.jsが実行されないようにする）。
「spec/index.js」vs「spec/specs、js」はタイプミスです。編集された質問。答えてくれてありがとう。オリジナル（古いバージョン）がこの設定を行うようには設計されていないという真実のようです。私はもっと良い質問があると思います*どのようにこのようなプロジェクトを整理する必要がありますか？多くのチュートリアルでは、プロダクションスクリプトとテストスクリプトがバンドルされていません。 testemのようなものを追加すれば、人々は混乱することはありません。これらすべてのパッケージを調和させて統合するためのメタガイドラインが必要です。 – Sukima
おそらく根本的な問題は、JSエコシステムの多様性です。まだ若いです。たぶん、ある日、重複したパッケージ/ユーティリティが共存するのをやめ、そのうちの1つがXの問題を解決するためのデフォルトリソースになるでしょう。今のところ、JSについて言えば、少なくとも2/3の異なるライブラリが同じことをしています。したがって、ビルドシステムのようなものは完全に無関係で、ライブラリの可能なすべての組み合わせに対してうまく機能することは特に困難です。 –
この 'aliasMappings'オプションは' grunt-browserify'に特有のものか、あるいは 'browserify'隠れオプションのラッパーですか？私は['opts.basedir']（https://github.com/substack/node-browserify#var-b--browserifyfiles-or-opts）オプションで同じ動作をしようとしていますが、運はありません。 。 – eightyfive