我是新來browserify並試圖加載瀏覽器NPM模塊，但我發現了以下錯誤：要求是沒有定義的錯誤與browserify

Uncaught ReferenceError: require is not defined

我從下面的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');

來源

2015-02-24 King Julien

你可以發佈更多的代碼背景？ bundle.js和script.js的內容是什麼 – sma 2015-02-24 13:02:54

@sma只是用兩個文件的內容更新了問題。 – 2015-02-24 13:06:13

「require」函數僅在「bundle.js」腳本上下文中可用。 Browserify會將所有需要的腳本文件放入「bundle.js」文件中，因此您只需將「bundle.js」包含在HTML文件中，而不是「script.js」文件中。

來源

2015-02-24 13:11:41 kevinvile

所以我不能要求我爲此目的捆綁在一起的模塊..？ – 2015-09-29 12:23:41

在您運行browserify之前，您可以在源代碼中使用「require」。因此，在您的源代碼javascript中，您可以要求您需要的任何模塊，然後當您瀏覽源代碼時，它會將所有源代碼（包括您需要的模塊）打包到您可以在html中引用的「bundle.js」文件中。希望有所幫助！ – kevinvile 2015-09-30 12:39:24

我現在明白了 - browserify並沒有創建一個模塊，你可以從瀏覽器中得到（），它打包你的代碼並把所有的東西封裝在一個閉包中 - 你需要特殊的步驟來創建一個你可以在瀏覽器中使用的庫。我會將這些步驟加以解釋並將其添加到此答案中，因爲許多人會對OP和我自己所做的同樣的誤解。 – gburton 2017-02-09 00:25:47

短回答：刪除script.js導入

較長的答案：由於方法require沒有在瀏覽器中定義，因此您會收到錯誤消息。你不應該包括script.js。

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

來源

2015-02-24 13:11:08 thomaux

我個人更喜歡保持我的庫代碼和應用程序代碼獨立。所以我也創建了一個像bundle.js和script.js。

有一個簡單的解決方法，這使得這項工作。這是什麼地方，我browserify文件：

window.require = require;

這將暴露require進入「全局」命名空間。然後，您可以從您的script.js需要所有你想要的。

雖然你放棄了一個優點：你必須在你的browserify文件中包含所有必需的庫。那麼你沒有找到所有你的依賴的奢侈品！

我完全期待人們哭泣「骯髒的黑客」或「這不是它的意思」。也許吧。但我希望這些文件分開。只要我不包含任何其他所謂的「要求」，我會很好，非常感謝。

有時候，一個全球性可以使所有的差異。

來源

2015-08-18 21:30:06 amenthes

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

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

後，你應該有window.Bundle在bundle.js。
所以在這一點上，你應該能夠從script.js訪問。

如果您正在使用咕嚕

如果您正在使用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"] 
     } 
    } 
},

如果您正在使用一飲而盡

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

見here爲chart.js之一飲而盡文件。

如果您正在使用巴貝爾

如果您使用的巴貝爾和es6可能要導出您Bundle類。

// you should have something like that 

class Bundle { 
    ... 

} 

export default Bundle;

所以因爲現在巴別用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.default();

來源

Standalone browserify builds

來源

2017-01-05 03:21:42 borracciaBlu

要求是沒有定義的錯誤與browserify

回答

如果您正在使用咕嚕

如果您正在使用一飲而盡

如果您正在使用巴貝爾

來源

相關問題