web-dev-qa-db-ja.com

requireはbrowserifyで定義されていないエラーです

Browserifyを初めて使用し、ブラウザにnpmモジュールをロードしようとしていますが、次のエラーが表示されます。

キャッチされないReferenceError：requireが定義されていません

http://browserify.org/ のチュートリアルに従っています。次のコンテンツを含むjavascriptファイルを作成しました。

var unique = require（ 'uniq'）;

その後、実行します

npm install uniq

そして

browserify main.js -o bundle.js

bundle.jsファイルが生成され、htmlに含めましたが、上記のエラーが引き続き発生します。私が間違っていることは何ですか？

これは最終的なHTMLファイルのコンテンツです。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="bundle.js"></script>
    <script src="script.js"></script>
</head>
<body>

</body>
</html>

これはbundle.jsのコンテンツです： http://Pastebin.com/1ECkBceB

これはscript.jsです：

var unique = require（ 'uniq'）;

javascriptnode.jsbrowserify
29
King Julien

「require」関数は、「bundle.js」スクリプトコンテキストでのみ使用可能です。 Browserifyは必要なすべてのスクリプトファイルを取得して「bundle.js」ファイルに格納するため、HTMLファイルには「script.js」ファイルではなく「bundle.js」を含めるだけで済みます。

37
kevinvile

個人的には、ライブラリコードとアプリケーションコードを分離しておくことを好みます。だから、bundle.jsおよびscript.js。

この作業を行う簡単な回避策があります。これは私のbrowserify-fileのどこかにあります：

window.require = require;

これにより、requireが「グローバル」名前空間に公開されます。その後、必要なすべてをscript.js。

ただし、1つの利点をあきらめます。必要なすべてのライブラリをbrowserifyファイルに含める必要があります。その場合、すべての依存関係を見つけるだけの贅沢は得られません！

私は、人々が「汚いハック」や「これは本来の意味ではない」と叫ぶことを完全に期待しています。はい、多分。しかし、私はそれらのファイルを分けたいです。そして、「必要」と呼ばれるものを含めない限り、私は大丈夫です、ありがとうございました。

1つのグローバルがすべての違いを生むことがあります。

14
amenthes

短い答え：script.jsインポートを削除する

長答：ブラウザでメソッドrequireが定義されていないため、エラーが発生しています。 script.jsを含めないでください。

Browserifyの背後にある考え方は、CommonJSモジュールを使用してソースを分割し、ブラウザーで使用する1つのファイルにバンドルできることです。 Browserifyはすべてのソースを走査し、すべてのrequiredファイルをバンドルに連結します。

8
thomaux

そのようなスクリプトを実行するには、バンドルでスタンドアロンを使用する必要があるようです。

browserify main.js --standalone Bundle > bundle.js

その後、window.Bundleにbundle.jsが必要です。
その時点で、script.jsからアクセスできるはずです。

あなたがうなり声を使用している場合

grunt install grunt-browserifyを使用している場合。

npm install grunt-browserify --save-dev

そして、grunt.js Gruntfileで：

// Add the task
grunt.loadNpmTasks('grunt-browserify');

// Add the configuration:
browserify: {
    dist: {
        options: {
            // uncomment if you use babel
            // transform: [
            //     ["babelify", { "presets": ["env"] }]
            // ],
            browserifyOptions: {
                standalone: 'Bundle'
            }
        },
        files: {
           "bundle.js": ["main.js"]
        }
    }
},

gulpを使用している場合

 // on your build task
 var bundled = browserify('main.js', { standalone: 'Bundle' })
               .bundle()
               .pipe(source('bundle.js'))
               .pipe(gulp.dest(outDir));

Chart.js gulpファイルについては here をご覧ください。

バベルを使用している場合

Babelとes6を使用している場合、おそらくBundleクラスをエクスポートしています。

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

したがって、Bundleを使用するためにbabelを使用するため、Bundle.defaultを使用する必要があります。

// in script.js
var bundle = new Bundle.default();

この構文を回避するには、BundleをBundle.defaultでオーバーライドできます。

Bundle.jsの最後に次を挿入します。

window.Bundle = window.Bundle.default;

だから今あなたが持っているでしょう：

// in script.js
var bundle = new Bundle.default();

ソース

スタンドアロンbrowserifyビルド

8
borracciaBlu