Webpack TypeScript 和 xgettext 翻译

Question

我有一个 Django 应用程序，正在使用 Django 的 i18n 模块来帮助翻译我的字符串。为了翻译JavaScript，我运行

python manage.py makemessages -d djangojs

这会将所有标记的字符串添加到 .po 文件中。这对我静态文件夹中所有无聊的 .js 文件都非常有效。但是，我们开始使用 webpack 将一些 typescript（.tsx 文件）打包到 bundle.js 文件中。该文件在构建后被复制到静态文件夹，所以我希望 Djangos makemessages 也能从中获取字符串。但是，似乎没有正确解析字符串，因为 bundle.js 中的大部分代码只是用 eval().

包裹的字符串

我相信这意味着我需要 webpack - 除了 bundle.js 文件之外 - 为每个 .tsx 文件创建一个 .js 文件，而不需要所有 eval() 废话，这样 django 的makemessages 可以正确解析。但是，我不知道该怎么做。我当前的配置如下所示

var path = require("path");
var WebpackShellPlugin = require('webpack-shell-plugin');

var config = {
    entry: ["./src/App.tsx"],

    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },

    devtool: 'source-map',

    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/
            },
            {
            test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },

    plugins: [
        new WebpackShellPlugin({
            onBuildEnd:['./cp_to_static.sh'],
            dev: false  // Needed to trigger on npm run watch
        })
    ]
};

module.exports = config;

那么如何让 webpack 吐出这些文件呢？
这是正确的做法吗，或者有没有办法让 Django 正确解析 bundle.js？

Answer 1

事实证明，所有的 eval 废话都是由 webpacks "watch" 函数生成的。当简单地运行用于构建脚本的 webpack 时，它按预期工作

Webpack TypeScript 和 xgettext 翻译

Webpack TypeScript and xgettext translations

django

xgettext

django-i18n

webpack