Browserify動態單獨捆綁

Question

我的應用程序將給定語言的消息對象加載到應用程序中。 我的結構是這樣的：

/lang
    /en.js (100 kb file)
    /ru.js (100 kb file)
    /... many more
app.js (this is `MyApp` as below)

語言文件非常大，所以我想創建單獨的包，然后只包含你需要的文件<script src="lang/en.js"></script> 。 語言也可以隨時在應用程序中“切換”。

我如何告訴browserify為所有語言文件構建主應用程序和單獨的包，並且仍然允許MyApp require這些語言文件？

function MyApp(lang) {
    this.messages = {};
    this.switchLang(lang);
};

MyApp.prototype.loadLang = function(lang) {
    this.messages = require('./lang/' + lang + '.js');
};

MyApp.prototype.switchLang = function(lang) {
    this.lang = lang;
    this.loadLang(lang);
};

MyApp.prototype.sayHello = function() {
    alert(this.messages.HELLO);
};

module.exports = MyApp;

Answer 1

您可以在browserify命令中使用-r （require）和-x （external）將所有語言與主應用程序分開。

將語言捆綁到一個文件中，可能如下所示：

browserify -r ./lang/en.js -r ./lang/ru.js > languages.js

建議：您可以使用上述命令為每個語言文件創建單獨的包。 只需使用-r一次。

然后在 MyApp.js 之前的html頁面中包含新文件（ languages.js ）。 然后你必須在構建MyApp.js忽略它們。

browserify --ignore-missing -x ./lang/en.js -x ./lang/ru.js -d app.js > MyApp.js

您仍然可以require這些語言。

注：如果您對每種語言（參見單獨的包RECOMMENDED ），你只被允許require所包含的那些在主應用程序。

沒有browserify方法為lang/每個文件自動執行此操作。

我建議你寫一個*.cmd （批處理）文件，為lang/每個語言文件執行上述命令。 所以你仍然可以包括你喜歡的語言。

編輯： --im時使用--ignore-missing或MyApp.js 。 因此，您可以require所有語言，當它們丟失時，它們仍然是undefined 。