backbone.js - Handlebars 自定义助手 - 迁移到 Webpack

Question

我们有一个基于主干、 Marionette 和 Handlebars 的应用程序，没有导入/导出或需要方法，用 grunt 管理，我们正在尝试迁移到 webpack。

我的 Handlebars 自定义助手有问题。

我们的助手代码:

'use strict';

function I18n() {
    this.constructor(arguments);
}

I18n.prototype = {

    constructor: function () {
        ...some stuff

    }

    get: function () {
        ...some stuff
    }
    ...some other functions
}

ourNameSpace.I18n = new I18n();

并且它包含在这个函数中的一个文件中以全局加载它:

Handlebars.registerHelper('i18n', _.bind(ourNameSpace.I18n.get, ourNameSpace.I18n));

然后我们在模板中使用它，如下所示:

{{i18n "LblEmail"}}

我尝试使用 handlebars-loader 并将此查询对象添加到 webpack.config 以将其添加到包中:

{ 
    test: /\.hbs$/, 
    use: {
        loader: 'handlebars-loader',
        query: { 
            helperDirs: [
                path.resolve(__dirname, 'public/assets/js/common/i18n/')
            ]
        }
    }
}

Webpack 在包中添加了我们的帮助程序代码，但是当它应该在模板中被调用时，我有这个错误:

Uncaught TypeError: __default(...).call is not a function

Webpack 生成的 bundle 代码在哪里调用:

...
    + alias2(__default(__webpack_require__(2)).call(alias1,"LblEmail",{"name":"i18n","hash":{},"data":data}))
...

第二次我也尝试在帮助器中添加导出，即使我们在我们的应用程序中(还)没有使用导入/导出方法。在帮助文件的末尾添加:

export default I18n

这修复了错误，但助手似乎不起作用，因为页面上的所有文本都是空的(而不是显示 i18n 翻译或键)

是否有人使用 Handlebars 自定义助手进行了相同类型的迁移，或者知道我如何重构它以便 Webpack 可以正确处理它并且包可以正确执行它？

Answer 1

所以几个月后我会回答我自己的问题，我设法解决了我们的问题:

我通过依赖 I18nJS 创建更现代的帮助器(三个，用于遗留帮助器中的三个函数)来重写我们的旧遗留帮助器(使用自定义函数)。 :

import I18nJs from 'i18n-js';
const I18n = key => I18nJs.t(key);
export default I18n;

它由 webpack 加载，带有 Handlebars 加载器，如下所示:

{
    test: /\.hbs$/,
    use: {
        loader: 'handlebars-loader?runtime=handlebars/runtime',
        query: {
            helperDirs: [path.resolve(__dirname, 'src/js/common/i18n/helper')],
            inlineRequires: '/images/',
            precompileOptions: {
                knownHelpersOnly: false,
            },
        },
    },
}

在我们的模板中，我们无需更改任何内容即可使用它:

<label>{{i18n "LblEmail"}}</label>

但是，要在 javascript 文件上使用本地化，我们必须进行一些更改:

我创建了一个“帮助程序”(不是 Handlebars 帮助程序)，实现与 Handlebars 帮助程序相同的逻辑:

import I18nJs from 'i18n-js';

const I18n = {
    get(key) {
        return I18nJs.t(key);
   },

   ... some other functions
};
export default I18n;

我们导入这个文件并像往常一样在现代堆栈中使用它的功能:

import I18n from '../common/i18n/I18nSt';
...
console.log(I18n.get('PasswordMissing'));

所以当我们在我们的 js 文件中调用我们的翻译函数时，我们不得不做一些小的重构，以前是这样的:

console.log(OurNamespace.I18n.get('PasswordMissing'));