使用 WebPack 加载内部模块属性答案

【问题标题】：Load internal module attribute with WebPack使用 WebPack 加载内部模块属性
【发布时间】：2018-08-01 18:00:35
【问题描述】：

我正在将旧的 Dojo Toolkit 应用程序移植到更新的技术（Vue.js 和 WebPack）。

我的场景是……

这些新模块应该与旧的 Dojo 加载器或新的 WebPack 加载器一起使用。我能够删除大部分 dojo 依赖项，但我仍然需要为新组件使用插件 dojo/text（将 html 文件作为字符串加载）和 dojo/i18n（基于语言环境加载模块）。

这些组件正在 WebPack 应用程序上进行原型设计，但在生产中它仍将使用 Dojo Loader 工具，所有 Dojo 依赖项都已删除。

我能够配置 WebPack 在使用 dojo/text 时加载 HTML，在使用 dojo/i18n 时加载默认语言：

plugins: [
  new webpack.NormalModuleReplacementPlugin(/^dojo\/text!/, function(data) {
    data.request = data.request.replace(/^dojo\/text!/, '!html-loader!');
  }),
  new webpack.NormalModuleReplacementPlugin(/^dojo\/i18n!/, function(data) {
    data.request = data.request.replace(/^dojo\/i18n!/, '');
  })
]

问题...

默认语言的典型 i18n Dojo 模块是：

define({
  root: {
    placeholder: 'Name'
  },
  es: true,
  pt: true
});

Dojo loader 只获取 root 属性作为模块结果：

define({
  placeholder: 'Name'
});

问题是……

我可以使用现有的加载器或插件加载、解析或评估模块并仅返回根属性作为结果吗？

制作这个模块：

define({
  root: {
    placeholder: 'Name'
  },
  es: true,
  pt: true
});

变成

define({
  placeholder: 'Name'
});

【问题讨论】：

标签： javascript webpack dojo webpack-loader

【解决方案1】：

对于这个用例，可以写一个自定义的loader，loader的源码是：

module.exports = function(source) {
  return 'module.exports = ' + JSON.stringify(eval('function define(x) { return x; }; ' + source).root);
};

而且你必须包括使用NormalModuleReplacementPlugin 做添加加载器：

new webpack.NormalModuleReplacementPlugin(/^dojo\/i18n!/, function(data) {
  data.request = data.request.replace(/^dojo\/i18n!/, '!dojo-i18n!');
})

【讨论】：