使用 browserify 未定義要求錯誤

Question

我是 browserify 的新手，並嘗試在瀏覽器中加載 npm 模塊，但出現以下錯誤：

未捕獲的 ReferenceError：需要未定義

我正在關注http://browserify.org/ 中的教程。 創建了具有以下內容的 javascript 文件：

var unique = require('uniq');

然后運行

npm 安裝 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');

Answer 1

“require”函數僅在“bundle.js”腳本上下文中可用。 Browserify 將獲取所有必需的腳本文件並將它們放入“bundle.js”文件中，因此您只需要在 HTML 文件中包含“bundle.js”，而不是“script.js”文件。

Answer 2

我個人更喜歡將我的庫代碼和應用程序代碼分開。 所以我還創建了一個bundle.js和一個script.js類的東西。

有一個簡單的解決方法，使這項工作。 這是我的瀏覽器文件中的某處：

window.require = require;

這會將require暴露到“全局”命名空間中。 然后，您可以從您的script.js您想要的所有內容。

但是，您確實放棄了一個優勢：您必須在 browserify 文件中包含所有必需的庫。 那么，您不會有幸找到所有依賴項！

我完全希望人們會喊出“骯臟的黑客”或“這不是它的本意”。 也許吧。 但我希望這些文件分開。 只要我不包括任何其他稱為“要求”的內容，我就沒事，非常感謝。

有時，一個全局變量可以使一切變得不同。

Answer 3

似乎要運行這樣的腳本，您必須在捆綁包上使用 standalone。

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

之后你應該在window.Bundle中有bundle.js 。
所以此時你應該能夠從script.js訪問。

如果你使用 grunt

如果您使用grunt安裝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 文件，請參見此處。

如果你使用 babel

如果您正在使用 babel 和es6您可能正在導出您的Bundle類。

// you should have something like that 

class Bundle {
    ...

}

export default Bundle;

所以因為 babel 現在要使用Bundle你應該使用Bundle.default等等：

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

為了避免這種語法，您可以使用Bundle.default覆蓋Bundle 。

在 bundle.js 的末尾插入：

window.Bundle = window.Bundle.default;

所以現在你將擁有：

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

來源

獨立的 browserify 構建

Answer 4

簡短回答：刪除 script.js 導入

更長的答案：您收到錯誤是因為瀏覽器中未定義方法require 。 你不應該包含script.js 。

Browserify 背后的想法是您可以使用 CommonJS 模塊拆分源並將它們捆綁到一個文件中以在瀏覽器中使用。 Browserify 將遍歷您的所有源並將所有require文件連接到包中。

使用 browserify 未定義要求錯誤

問題描述

4 個解決方案

解決方案1
40 已采納 2015-02-24 13:11:41

解決方案2
15 2015-08-18 21:30:06

解決方案3
11 2017-01-05 03:21:42

如果你使用 grunt

如果你使用 gulp

如果你使用 babel

來源

解決方案4
9 2015-02-24 13:11:08

使用 browserify 未定義要求錯誤

問題描述

4 個解決方案

解決方案1 40 已采納 2015-02-24 13:11:41

解決方案2 15 2015-08-18 21:30:06

解決方案3 11 2017-01-05 03:21:42

如果你使用 grunt

如果你使用 gulp

如果你使用 babel

來源

解決方案4 9 2015-02-24 13:11:08

解決方案1
40 已采納 2015-02-24 13:11:41

解決方案2
15 2015-08-18 21:30:06

解決方案3
11 2017-01-05 03:21:42

解決方案4
9 2015-02-24 13:11:08