javascript - 动态导入本地和远程文件

Question

背景

我目前正在构建一个具有相当奇怪的本地化基础架构的渐进式 Web 应用程序 (PWA)。它有两个要素：

• 本地定义的翻译（在项目 repo 中定义）
• 远程定义的翻译（静态存储在 CDN 中）

从理论上讲，这需要工作的方式非常简单：

1. 检测语言环境
2. 导入区域设置的本地翻译
3. 导入语言环境的远程翻译
4. 组合对象
5. 将它们提供给应用程序

问题

这引发了一些问题；

• 如何仅动态导入必要的“本地”翻译？
• 如果模块/文件名是动态的，webpack 如何知道捆绑本地翻译？
• 如何仅动态导入必要的“远程”翻译？

我试过的

我目前有以下文件结构：

/i18n
│   index.js
│
└───/translations
│   │
│   └───/en
│   │   │   index.js
│   │   │   meta.json
│   │   │   ...
│   │
│   └───/es
│   │   │   index.js
│   │   │   meta.json
│   │   │   ...

我的意图如下：

• /i18n/index.js- 执行必要翻译的初始设置和动态加载
• /i18n/translations/XX/index.js- 收集并导出目录中的所有翻译json文件XX

我还没有设法做到这一点，因为我不完全确定如何最好地实现它，但这就是我到目前为止所拥有的：

/i18n/index.js- 设置本地化

// Determine the locale...
const locale = 'XX' // For example purposes

const translations = {};

// Import the local translations
// IS THIS THE RIGHT WAY TO DO THIS?
translations.local = require(`./translations/${locale}/index.js`);

// Import the remote translations here...
// Maybe use importScripts() but I am fairly certain this is 
// only available in the service worker...
// HOW CAN THIS BE DONE?
translations.remote = '';

translations.combined = Object.assign(translations.local, translations.remote);

/i18n/translations/XX/index.js- 本地进口

export default {
    meta: require('./meta')
    // etc...
}

我的问题

如问题部分所述，我不完全确定如何实现我所需要的。谁能建议如何最好地实现这一点？

如果我目前拥有的不是好的做法，请随意建议替代文件结构......

标签： javascriptwebpackprogressive-web-apps