在同一頁面上使用Browserify和RequireJS？

因此，我遇到了一個有趣的用例，我使用Browserify將所有資產捆綁在一個項目中，但需要在某個特定內聯模塊中加載大型外部（外部項目）模塊時，應用程序窗口被訪問。（這是一個由三個腳本組成的視頻播放器模塊，需要時可以異步拉入）。在同一頁面上使用Browserify和RequireJS？

目前如果要是裝入的Browserified代碼後requireJS模塊的Browserified app.js文件之前加載，以cannot find module錯誤我得到各種錯誤從uncalled object錯誤。

無論如何，我可以讓Browserify和RequireJS在同一頁上很好地播放嗎？我正在失去理智！

來源

2014-06-11 Scotty

嘗試將您的捆綁JavaScript封裝在閉包中。 – idbehold

我認爲這是Browserify在捆綁文件的開頭添加一個require global。如何將整個導入的app.js文件封裝在閉包中而不修改browserified文件？ – Scotty

你有沒有解決這個問題？我來自相反的方向...我的應用程序大部分是requirejs，但是我想要在NPM中提供一個可用的庫，我打算使用browserify包裝器進行打包。到目前爲止沒有運氣。 –

TL; DR - 在您的browserified腳本中使用window.require。

也許它仍然會幫助別人。我碰巧使用完全基於requireJS風格的AMD的'外部'基於dojo的庫，它絕對不可「browserifyeble」，並且不可轉換爲CommonJS或任何其他健全的庫。我自己的代碼完全Browserified。在browserified腳本之前

裝載了AMD加載器（它定義了全球require功能）：它的工作確定這樣

<script src="dojo/dojo.js"></script> <!-- RequireJS/AMD loader, defining a global 'require'--> 
<script src="app/main.js"></script> <!-- The Browserify bundle -->

在你自己的JS，呼籲window對象require功能（因爲你會有一個本地browserify- require遮蔽全球之一）
```
window.require(['dojo/dojo'], function (dojo) { ... }); 
```
「外部」應用程序或庫（它自己調用require加載子模塊等）工作得很好，因爲代碼已超出browserify上下文，並且全局require未在其中映射。

也許如果你有一些不錯的純正標準RequireJS模塊，你可以以某種方式將它們轉換成Browserifiable，但對我來說，這不是一個選項。

來源

2014-08-30 19:54:45

好東西。這對我有很大的幫助 – orcaman

非常有用的用於在模塊捆綁中分割大型應用程序並對它們進行延遲加載。謝謝。 –

偉大的人。感謝您分享這一點。 – alinoz

有一個名爲browserify-derequire的工具，通過重命名browserify的require statmenets來解決此問題，以避免命名衝突。通過了變化你的build命令

npm install -g browserify-derequire

使用它作爲一個browserify插件：

它可以與NPM使用安裝

browserify src/*.js -p browserify-derequire > module.js

有更多的討論對這個問題的：https://github.com/substack/node-browserify/issues/790

來源

2015-12-16 12:53:55 Cride5

對於一個友好的解決方案（類似於@ Cride5提出的），您可以使用gulp-derequire插件。

從文檔基本例如：

var derequire = require('gulp-derequire'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 

gulp.task('build', function() { 
    var bundleStream = browserify({entries: './index.js', standalone: 'yourModule'}).bundle(); 
    return bundleStream 
     .pipe(source('yourModule.js')) 
     .pipe(derequire()) 
     .pipe(gulp.dest('./build')); 
});

插件也是基於derequire模塊，這樣所有的選項都支持。

來源

2016-05-26 18:07:31 Olga

在同一頁面上使用Browserify和RequireJS？

回答

相關問題