web-dev-qa-db-ja.com

browserifyのrequireパスをrequirejsのように動作させる

ファイルを移動したり、ファイルのインクルードパスを新しいフォルダーからの相対パスに常に書き換えたりするのは面倒だと感じています。

Browserifyコードでこれを避けたい：

var View = require('../../../../base/view');

そして、requirejsに沿って、ベースパスがjsであることがわかっている場合にさらに何かを実行します。

var View = require('base/view');
javascriptnode.jsrequirejscommonjsbrowserify
18
Abadaba

pathsオプションを使用する必要があります。これはbrowserifyには記載されていませんが、 node-browser-resolve （内部で使用）に記載されています。

パス-通常のnode_modules再帰ウォークで何も見つからない場合に使用するrequire.paths配列

13
eightyfive

ここでの優れたオプションは、利用可能なaliasifyプラグインを使用することです ここ 。次に、次のようなものをpackage.jsonに追加します。エイリアス設定のすべてのパスは、そのファイルの位置を基準にしています。

  "browserify": {
    "transform": [
      "aliasify"
    ]
  },
  "aliasify": {
    "aliases": {
      "app": "./src/app",
      "components": "./src/components",
      "someAlias": "./src/app/some/path/to/a/place",
      "foobar": "./go/to/a/module/named/foobar",
    }
  }

次に、ファイルで次の操作を行います。

var foobar = require("foobar");
var sampleComponent = require("components/someSample");

//My JS code
9
AlexZ

node_modules

アプリケーションコード（またはプラットフォームでサポートされている場合はそのシンボリックリンク）をnode_modulesの下に置くことができます。例えば。：

node_modules/
+-- app/
    +-- js/
        +-- base/
            +-- view.js
        +-- a/
            +-- b/
                +-- c/
                    +-- somefile.js

// somefile.js                
require("app/js/base/view");

ただし、重要な注意事項があります。これにより、APIを介してプログラムで指定された変換の適用が中断されます。例：

browserify('app/entry.js')
  .transform(es6ify)

Browserifyには、変換に関係する「トップレベル」ファイルの概念があります。その概念、および一般的な変換の動作は、browserifyのドキュメントでは十分に説明されていません。ここで問題のいくつかの議論を見ることができます： substack/node-browserify＃99

pathmodify

別のオプションは私の pathmodify browserifyプラグインです。これにより、非相対パスとプログラムによる変換を使用できます。次のようなコードのブラウザ化を有効にするには：

var View = require('base/view');

あなたは次のようなことをします：

var pathmodify = require('pathmodify');

var opts = {mods: [
  // Maps require() IDs beginning with "base/" to begin with
  // "/somedir/js/base/"
  pathmodify.mod.dir("base", "/somedir/js/base"),
]};

// Give browserify the real path to entry file(s).
// pathmodify will transform paths in require() calls.
browserify('./js/entry')
  .plugin(pathmodify, opts)
  .transform(es6ify)
  .bundle()
  ...

組み合わせ

Pathmodifyは、browserifyの問題のみを解決することに注意してください。 base/viewのようなパスがノードなどの別のコンテキストでも機能する必要がある場合は、シンボリックリンクを使用できる場合は、2つを組み合わせることができます。たとえば、node_modules/baseを/somedir/js/baseにシンボリックリンクし、示されているようにpathmodifyを構成し、エントリファイルのnode_modules外のパスをbrowserifyにポイントし続けます。

4
JMM