Webpack TypeScript et xgettext translations

Question

J'ai une application Django et j'utilise le module i18n de Django pour aider à traduire mes chaînes. Pour la traduction de JavaScript, je lance

python manage.py makemessages -d djangojs 

qui ajoute toutes les chaînes marquées à un fichier .po. Cela fonctionne très bien pour tous mes fichiers .js ennuyeux dans mon dossier statique. Cependant, nous commençons à utiliser webpack pour emballer de la dactylographie (fichiers .tsx) dans un fichier bundle.js. Ce fichier est copié dans le dossier statique après la construction, donc je m'attendais à ce que Djangos makemessages en récupère les chaînes. Cependant, il semble que les chaînes ne sont pas analysées correctement, car la plus grande partie du code dans bundle.js est simplement des chaînes entourées de eval().

Je crois que cela signifie que je dois webpack à - en plus du fichier bundle.js - créer un fichier .js pour chaque fichier .tsx sans que toutes les absurdités eval(), alors que makemessages de django peut l'analyser correctement. Je n'ai aucune idée de comment faire cela, cependant. Ma config actuelle ressemble à ce

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; 

• Alors, comment puis-je faire webpack cracher ces fichiers?
• Est-ce la bonne chose à faire, ou y at-il un moyen de rendre Django parse bundle.js correctement?

Answer 1

Il s'avère que tout le non-sens d'eval a été généré par la fonction "watch" de webpacks. Lorsque vous exécutez simplement webpack pour construire le script, cela fonctionne comme prévu