Question

我们有一个基于骨干，木偶和把手的应用程序，没有导入/导出或需要方法，用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中以将其添加到包中：

{ 
    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可以正确处理它并且捆绑包可以正确执行它？

Answer 1

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

我通过依靠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文件上使用本地化，但是我们必须进行一些更改：

我创建了一个“ helper”（不是handlebar helper），实现了与handlebars helper相同的逻辑：

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文件中调用translations函数时，我们必须进行较小的重构，就像之前这样：

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

把手定制助手 - 迁移到Webpack

1 个答案: