Webpack TypeScript 和 xgettext 翻译答案

【问题标题】：Webpack TypeScript and xgettext translationsWebpack TypeScript 和 xgettext 翻译
【发布时间】：2017-09-14 08:54:36
【问题描述】：

我有一个 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？

【问题讨论】：

标签： django webpack django-i18n xgettext

【解决方案1】：

原来所有的 eval 废话都是由 webpack 的“watch”函数生成的。当简单地运行 webpack 来构建脚本时，它会按预期工作

【讨论】：