babel-plugin-react-intl插件配置后无响应，无法提取JSX消息求助

Hey，我之前也碰到过babel-plugin-react-intl完全没反应的情况，给你列几个实际排查过的方向，你可以一个个试：

这是最容易踩的坑！如果你的Babel是7.x版本，那不能用旧的babel-plugin-react-intl，得装@babel/plugin-react-intl，而且预设也要换成@babel/preset-env（代替原来的es2015）、@babel/preset-react这些带@babel前缀的包。如果还是用Babel6，那要确保插件是2.x版本，和你的presets版本匹配。

• messagesDir路径：确认这个路径是相对于你执行Babel命令的目录，比如你在项目根目录跑命令，那./build/messages就是根目录下的build/messages。可以手动先创建这个目录试试，有些版本的插件不会自动创建目录，导致提取失败。
• 配置格式：你的配置看起来数组嵌套是对的，但再检查一下逗号有没有漏写，比如transform-runtime的配置结尾有没有逗号，react-intl插件的配置有没有闭合正确。

插件只会提取用react-intl官方方式定义的消息，比如：

• 使用<FormattedMessage>组件：

  import { FormattedMessage } from 'react-intl';
  
  function Greeting() {
    return <FormattedMessage id="greeting.hello" defaultMessage="Hello there!" />;
  }
  

• 或者用injectIntl高阶组件后的formatMessage：

  import { injectIntl, FormattedMessage } from 'react-intl';
  
  function Greeting(props) {
    return <div>{props.intl.formatMessage({ id: 'greeting.hello', defaultMessage: 'Hello there!' })}</div>;
  }
  
  export default injectIntl(Greeting);
  

如果你的消息是自己定义的变量或者其他非react-intl的方式，插件是识别不了的。另外，一定要给id字段，没有id的消息插件不会提取。

• 如果是用babel-cli直接转译，确认命令有没有覆盖配置，比如有没有用--plugins参数手动指定插件，导致.babelrc里的配置被忽略？比如正确的命令应该是：

  babel ./src --out-dir ./lib
  

• 如果是用webpack等构建工具，确认babel-loader有没有正确处理.jsx文件，比如loader的test规则有没有包含.jsx，有没有错误排除了src目录：

  module: {
    rules: [
      {
        test: /\.jsx?$/, // 匹配js和jsx文件
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
  

还要注意，webpack的配置里有没有单独指定Babel的presets/plugins，覆盖了.babelrc的内容。

确保你同时装了react-intl和对应的babel插件，比如：

• Babel6环境：

  npm install --save react-intl
  npm install --save-dev babel-plugin-react-intl babel-preset-es2015 babel-preset-react babel-preset-stage-0
  

• Babel7环境：

  npm install --save react-intl
  npm install --save-dev @babel/plugin-react-intl @babel/preset-env @babel/preset-react @babel/preset-stage-0
  

如果依赖缺失或者版本不匹配，插件可能静默失败。

运行Babel的时候加上--verbose参数，看看有没有处理你的JSX文件，以及react-intl插件是否被加载：

babel ./src --out-dir ./lib --verbose

如果日志里看不到你的JSX文件被处理，或者没有react-intl相关的输出，那说明Babel根本没用到这个插件，得回到配置层面排查。

你可以从版本兼容开始查，这个是最常见的问题，我之前就是因为Babel7还用了旧插件导致完全没反应。

内容的提问来源于stack exchange，提问作者Sami.S