javascript - Webpack:在不捆绑的情况下加载外部 JSON

Question

我正在使用 redux + deku 构建我的第一个单页网站，我需要将其国际化。我想要一个包含所有文本的 json 文件，如下所示:

# http://mysite.me/assets/i18n.json
{
  "en": {
    "greeting": "Hello"
  },
  "es": {
    "greeting": "Hola"
  }
}

理想情况下，我可以在我的启动文件中要求它:

const T = require('/assets/i18n.json')
setTranslation(T)

但它不能捆绑在同一个文件中，它应该保留为外部依赖项并且应该在运行时加载，这样我就可以编辑它而无需重新编译整个应用程序!

webpack 可以吗？将它直接包含在 HTML 中是我唯一的选择吗？

<script type="text/javascript" src="i18n.js"></script>
<script type="text/javascript" src="app.js"></script>

目前最后一个解决方案还可以，但我正在考虑按主要组件拆分翻译，因此直接通过 js 包含它的能力会很好。

感谢任何愿意提供帮助的人:)

Answer 1

一个选项是不需要文件而是fetch (或其他一些请求方法)然后从 webpack 中排除 JSON。

另一种方法是使用 webpack 的通用 block 插件拆分代码。你的 webpack 配置看起来像这样:

entry: {
    app: './index.jsx',
    i18n: [
        'en',
        'fr',
        '...others'
    ]
},
output: {
    path: '/path/to/dist/',
    filename: '[name].js'
}

参见 official docs了解更多信息