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 。