3

在我的工作项目中，我们使用 Vue 和 VueI18n 进行本地化。我们有一个 ref.js 文件，如下所示： 

export default {
  project: {
    lang: {
      test: {
        value: 'The test was a success',
        context: 'This string is a test string',
      },
    },
  },
},

翻译团队需要此参考文件，它是我们的“唯一真实来源”。现在在构建时应该会生成一个 en.js 文件。en.js 文件如下所示： 

export default {
  project: {
    lang: {
      test: 'The test was a success',
    },
  },
},

基本上只用它的值替换 test 键下的对象。
现在我们有一个在后台运行的文件观察器，它在每次 ref.js 文件更改时生成 en.js 文件。我想要的是将这个 en.js 生成集成到 webpack 构建过程中。
要求是：

  • 在初始构建时生成 en.js 文件
  • 监视 ref.js 文件并在 ref.js 文件更改时生成 en.js

我尝试编写一个 webpack 插件，但没有走得太远。我认为步骤如下：

  • 进入 beforeRun 钩子（最初生成文件）
  • 进入 watchRun?/beforeCompile? -> 检查更改的文件，如果 ref.js 在其中 -> 生成文件

我不明白在哪里/如何查看哪些文件已更改？

4

1 回答 1

2

我建议您创建加载程序。您可以为源文件 (ref.js) 和解析器 (loader) 定义规则，将源文件转换为首选形式。

webpack.config.js

module.exports = {
    (...)
    module: {
        rules: [
            {
                test: /ref\.js$/,
                loader: 'your-magic-loader',
            },
         (...)
        ]
    }
}

如何编写加载器：
https ://webpack.js.org/contribute/writing-a-loader/

于 2019-11-19T09:07:49.890 回答