首页 文章

把手定制助手 - 迁移到Webpack

提问于
浏览 次
3

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

我遇到了车把定制助手的问题 .

我们帮手的代码：

'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中以将其添加到bundle：

{ 
    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生成的包的代码在哪里是调用：

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

我还尝试在帮助器中添加导出，即使我们在应用程序中没有使用导入/导出方法 . 在帮助文件的末尾添加：

export default I18n

修复错误，但帮助程序似乎不起作用，因为页面上的所有文本都是空的（而不是显示i18n翻译或键）

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

backbone.js webpack handlebars.js marionette helpers

1 回答

  • 0

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

    • 我通过创建更现代的帮助器（三个，对于我们在遗留帮助器中的三个函数）重写我们的旧遗留助手（使用自定义函数）依赖于I18nJS：
    import I18nJs from 'i18n-js';
const I18n = key => I18nJs.t(key);
export default I18n;
    • 它由webpack加载，带有把手装载器，如下所示：
    {
    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文件上使用本地化，我们必须进行一些更改：

    • 我创建了一个“助手”（不是把手助手），它实现了与把手助手相同的逻辑：
    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'));
    回复于

相关问题