返回

一封给create-react-app的PR回忆录

前端

缘起

前些日子，在项目发布的过程中，CI突然报错了。我一看日志，原来是来自于一段CSS代码的报错，内容大致如下：

Syntax error: Unexpected token, expected ; (1:101)

既然错误是与CSS有关的，那么我们自然是找到webpack中关于CSS处理的部分。根据排除法，我最后把目光锁在了以下代码：

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[local]___[hash:base64:5]',
        },
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
  ],
},

经过一番排查，我发现问题的根源在于postcss-preset-env插件。这个插件的作用是将CSS代码转换为浏览器可以理解的格式。然而，在某些情况下，这个插件可能会导致CSS代码出错。

修复

为了修复这个问题，我尝试了以下几种方法：

  • 更新postcss-preset-env插件的版本。
  • 修改postcss-preset-env插件的配置。
  • 将postcss-preset-env插件从webpack中移除。

最终，我发现将postcss-preset-env插件从webpack中移除可以解决这个问题。我将这个解决方案提交给了create-react-app的维护者，他们很快地接受了我的PR。

经验教训

这次为create-react-app提交PR的经历让我学到了很多东西。首先，我了解到了如何使用webpack来处理CSS代码。其次，我学会了如何调试CSS代码出错。第三，我体会到了为开源项目做贡献的乐趣。

我鼓励大家也积极地为开源项目做贡献。开源项目是技术社区的宝贵财富，每一位贡献者都是开源项目发展的中流砥柱。

结语

希望这篇文章对大家有所帮助。如果您有任何问题，请随时与我联系。