react-intl - babel-loader を使用して babel-plugin-react-intl をロードする方法は?

Question

最近、create-react-app を使用して反応アプリを初期化しました。アプリをイジェクトしたところ、すべてのファイルがメイン ディレクトリにエクスポートされました。このセットアップでは、.babelrc を使用する代わりに、babel.dev.js を作成します (babel-loader を使用します)。

.babelrc ファイルなしで react-intl と babel-plugin-react-intl を構成する方法を見つけようとしています。

ドキュメントには、.babelrc が推奨されていると書かれています

.babelrc 経由 (推奨)

.babelrc

{
  "plugins": [
    ["react-intl", {
        "messagesDir": "./build/messages/"
    }]
  ]
}

babel-loader でこの動作を行う構文は何ですか? 現在、babel.dev.js のプラグインは次のようになっています。

plugins: [
  // class { handleClick = () => { } }
  require.resolve('babel-plugin-transform-class-properties'),
  // { ...todo, completed: true }
  require.resolve('babel-plugin-transform-object-rest-spread'),
  // function* () { yield 42; yield 43; }
  [require.resolve('babel-plugin-transform-regenerator'), {
    // Async functions are converted to generators by babel-preset-latest
    async: false
  }],
  // Polyfills the runtime needed for async/await and generators
  [require.resolve('babel-plugin-transform-runtime'), {
    helpers: false,
    polyfill: false,
    regenerator: true,
    // Resolve the Babel runtime relative to the config.
    // You can safely remove this after ejecting:
    moduleName: path.dirname(require.resolve('babel-runtime/package'))
  }]
]

私のコンポーネントには現在、次のように定義された文字列があります。

const messages = defineMessages({
  summaryTitle: {
    "id": "checkout.section.title.summary",
    "description": "Summary Section Title",
    "defaultMessage": "Summary"
  },
  shippingTitle: {
    "id": "checkout.section.title.shipping",
    "description": "Shipping Section Title",
    "defaultMessage": "Shipping"
  }
});