如何使用 babel-loader 加载 babel-plugin-react-intl？

Question

我最近使用 create-react-app 初始化了一个 React 应用程序。我弹出了该应用程序，现在我已将所有文件导出到我的主目录。此设置创建一个 babel.dev.js 而不是使用 .babelrc（它使用 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"
  }
});

Answer 1

像这样将 babel-plugin-react-intl 添加到你的插件数组中：

plugins: [
    ..., // some plugins here
    [require.resolve('babel-plugin-react-intl'), { messageDir: "./build/messages"}]
]

这将加载将 messageDir 作为选项传递给它的插件。

如何使用 babel-loader 加载 babel-plugin-react-intl？

How to load babel-plugin-react-intl using babel-loader?

react-intl

babel-plugin-react-intl

通过 .babelrc（推荐）