Question

在我的工作项目中，我们将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',
    },
  },
},

基本上只将测试键下的对象替换为其值。
现在，我们有一个在后台运行的文件监视程序，每当ref.js文件更改时，该文件监视程序就会生成en.js文件。我想要将这个en.js生成集成到webpack构建过程中。
要求是：

在初始构建时生成en.js文件
观看ref.js文件并在ref.js文件更改时生成en.js

我尝试编写一个webpack插件，但进展并不顺利。我认为步骤如下：

点击“ beforeRun”钩子（初始生成文件）
进入watchRun？/ beforeCompile？ ->检查更改的文件以及ref.js是否在其中->生成文件

我不了解的是在哪里/如何查看哪些文件已更改？

Answer 1

我建议您创建加载程序。您可以为源文件（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/

Webpack在构建时生成文件

1 个答案: