要求（並將值傳給）來自我的頁面的browserify模塊/ html

我將我的requirejs + play框架資產管道轉換爲gulp/browserify。到目前爲止，這是一個很棒的旅程。但是，我遇到了一個主要障礙。要求（並將值傳給）來自我的頁面的browserify模塊/ html

當我用requireJs，我可以做我的網頁上是這樣的：

var pageSpecificConstant = @configJsonObj; //something my server gives me. 
require(['jquery', 'unsubscribe'], function($, unsubscribe) { 
    $(function() { 
     unsubscribe.init(pageSpecificConstant); 
    }); 
});

基本上，我需要一些頁面級數據傳遞到至少某些模塊。

與一飲而盡/ browserify（和要素插件）

現在，我產生2包：

<script src="js/bundles/unsubscribe.js"></script> 
<script src="js/bundles/common.js"></script>

現在我很樂意做這樣的事情之前：

var unsubscribe = require('unsubscribe'); //or require(path_to_unsubscribe.js file)

不幸的是，這不是可能與browserify。

我想知道我的選擇是什麼。我閱讀了關於browserify的「獨立」選項，但由於我生成了多個捆綁包，因此我不完全清楚如何使用它。

這裏是我一飲而盡的browserify步驟（它仍處於原型階段）

browserify: function() { 
     var bundler = browserify(['./public/javascripts/unsubscribe.js', './public/javascripts/homepage.js'], { 
      debug: !production, 
      transform: [stringify({ 
        extensions: ['.html', '.mustache', '.handlebars'], 
        minify: true, 
        minifier: { 
         extensions: ['.html', '.mustache', '.handlebars']  
        } 
       }), 
       [browserifyCss, { 
        'autoInject': true, 
        'rootDir': './public/target/css' 
       }] 
      ], 
      globals: true, 
      cache: {} 
     }) 

     var build = argv._.length ? argv._[0] === 'build' : false; 
     if (watch) { 
      bundler = watchify(bundler); 
     } 
     var rebundle = function() { 
      return bundler 
      .plugin(factorBundle, { 
       //factor-bundle plugin 
       // File output order must match entry order 
       o: ['./public/target/javascripts/bundles/unsubscribe.js', './public/target/javascripts/bundles/homepage.js'] 
      }) 
      .bundle() 
      .on('error', handleError('Browserify')) 
      .pipe(source('common.js')) 
      .pipe(gulpif(production, buffer())) 
      .pipe(gulpif(production, uglify())) 
      .pipe(gulpif(production, gzip())) 
      .pipe(gulp.dest('./public/target/javascripts/bundles')); 
     }; 
     bundler.on('update', rebundle); 
     return rebundle(); 
    }

我只是需要一些方法來值傳遞給我從頁面browserify模塊。任何幫助，將不勝感激。

感謝

來源

2015-04-24 Chinmay Bijwe

我不太清楚你想要什麼。爲什麼不在模塊上公開一個可以用頁面數據調用的'init'方法？如果你想懶惰地加載模塊，你可以使用'[externalize]（https://github.com/epeli/browserify-externalize）'。 –

問題是我支持一箇舊的平臺，通過大量頁面特定通過模塊的init方法將設置/變量傳遞給JS。你可能會爭辯說我可以提出請求並獲取這些請求，但這會涉及到一些頁面的重構。我不想懶惰地加載模塊，因爲從技術上講，由於我在頁面上加載的包，它們已經可用。我無法想象如何「要求」他們。 –

如果'module'上有一個'init'方法，並且你正在給該窗口寫'pageSpecificVariable'，那麼你應該能夠執行'module.init（global.pageSpecificVariable）'，它將以同樣的方式工作。 –

對於一個快速的解決方案，我在入口點導出的應用程序，所以如果你的/path/to/bootstrap.js樣子：

var app = require("./app.js"), 
    config = requrie("./config.js"); 

app.init(config) 
    .run();

切入點然後切換到包含文件/path/to/export.js：

var app = require("./app.js"); 

window.app = app;

然後在頁面中（我正在使用PHP）：

app.init(
    <?php echo json_encode($config); ?> 
) 
.run();

來源

2016-06-30 11:04:49 avy

要求（並將值傳給）來自我的頁面的browserify模塊/ html

回答

相關問題