如何使用Craco编译React JS代码及解决JS编译失效问题

基础编译错误修复 #

• 首先确认依赖安装完整，执行以下命令安装所有必需依赖：

npm install @craco/craco tailwindcss autoprefixer --save-dev

• 检查根目录是否存在tailwind.config.js文件，确保content字段覆盖所有源码文件路径，配置示例如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 检查全局样式文件（默认路径为src/index.css），确认已添加Tailwind基础指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 清理缓存后重启服务，执行rm -rf node_modules/.cache删除缓存目录，再执行npm start启动项目即可。

Craco关联Babel配置方法 #

直接在craco.config.js中新增babel字段即可自定义Babel配置，完整配置示例如下：

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
  // Babel自定义配置
  babel: {
    // 自定义Babel预设添加至此
    presets: [],
    // 自定义Babel插件添加至此，例如装饰器语法支持、可选链语法支持等对应插件
    plugins: [],
    // 如需修改默认Babel Loader参数可通过该方法调整
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      return babelLoaderOptions
    }
  }
}

如果是特殊JS语法不支持导致的编译失败，安装对应Babel插件添加至上述plugins数组即可生效。

内容的提问来源于stack exchange，提问作者abrd