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（需要）和-x（外部）将所有语言与主应用分开。

将语言捆绑到一个文件中，如下所示：

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

推荐：您可以使用上述命令为每个语言文件创建一个单独的包。只需使用一次-r。

然后将新文件 (languages.js) 包含在您的 html 页面中之前 MyApp.js。然后你必须在构建MyApp.js时忽略它们。

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

您仍然可以require 这些语言。

注意：如果您对每种语言都有单独的捆绑包（请参阅RECOMMENDED），则您只能require 主应用中包含的捆绑包。

对于lang/ 中的每个文件，没有browserify 方式可以自动执行此操作。

我建议您编写一个*.cmd（批处理）文件，为lang/ 中的每个语言文件执行上述命令。因此，您仍然可以包含您喜欢的语言。

编辑：捆绑MyApp.js 时使用--ignore-missing 或--im。所以你可以require所有语言，当它们丢失时，它们仍然是undefined。