使用Webpack+Gulp+React在Jekyll站点中遇babel-loader意外令牌错误

Hey there, let’s troubleshoot that unexpected token error you’re facing with React in your Jekyll + Webpack + Gulp stack—these syntax errors usually boil down to gaps in Babel setup, misconfigured Webpack rules, or tooling integration issues. Let’s break down the most likely fixes based on what you’ve shared:

1. Fix Babel Preset & Dependency Gaps #

React’s JSX syntax requires specific Babel handling, and mismatched or missing presets are the #1 culprit here.

• First, ensure you’re using Babel 7+ (the modern standard) and have all required dependencies installed:

  npm install @babel/core babel-loader @babel/preset-env @babel/preset-react core-js@3 --save-dev
  

• Make sure your Webpack config’s babel-loader explicitly includes the React preset. Old Babel 6 packages like babel-preset-react won’t work with Babel 7, so stick to the @babel/ prefix:

  // Inside webpack.config.js -> module.rules
  {
    test: /\.(js|jsx)$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: { browsers: ['last 2 versions', 'ie >= 11'] },
            useBuiltIns: 'usage', // Automatically injects polyfills where needed
            corejs: 3 // Match your installed core-js version
          }],
          '@babel/preset-react' // Critical for parsing JSX
        ]
      }
    }
  }
  

2. Correct Webpack Include/Exclude Rules #

You mentioned adding an exclude config—this needs to be set up correctly to avoid skipping your React files or trying to transpile unnecessary node modules:

• Include your React source directory so Webpack knows to process those files, and exclude node_modules (most third-party packages are already transpiled):

  // Updated rule with include/exclude
  {
    test: /\.(js|jsx)$/,
    include: path.resolve(__dirname, 'src'), // Point to your React code folder
    exclude: /node_modules/,
    use: { /* babel-loader config as above */ }
  }
  

• Also, add resolve.extensions to your Webpack config to auto-recognize .jsx files (no more typing full extensions in imports):

  resolve: {
    extensions: ['.js', '.jsx']
  }
  

3. Properly Set Up babel-polyfill #

If you’re adding babel-polyfill to support older browsers, make sure it’s loaded first:

• Either import it at the very top of your entry React file:

  import '@babel/polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  

• Or add it directly to your Webpack entry array:

  entry: ['@babel/polyfill', './src/index.js']
  

• Note: If you’re using useBuiltIns: 'usage' in @babel/preset-env, you don’t need to import babel-polyfill explicitly—it will inject only the polyfills your code actually uses.

4. Fix Gulp & Webpack Task Order #

It’s easy to accidentally let Jekyll process uncompiled React code if your Gulp tasks run in the wrong order. Ensure Webpack finishes compiling your JS before Jekyll builds the site:

• Here’s a simplified Gulp task setup to enforce this order:

  const gulp = require('gulp');
  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config.js');
  const jekyll = require('gulp-jekyll');
  
  // Webpack compilation task
  gulp.task('webpack', (done) => {
    webpack(webpackConfig, (err, stats) => {
      if (err) {
        console.error('Webpack error:', err);
        done(err);
        return;
      }
      console.log(stats.toString({ colors: true }));
      done();
    });
  });
  
  // Jekyll build task
  gulp.task('jekyll', () => {
    return gulp.src('./**/*.{md,html}')
      .pipe(jekyll({
        source: '.',
        destination: '_site'
      }));
  });
  
  // Run Webpack first, then Jekyll
  gulp.task('build', gulp.series('webpack', 'jekyll'));
  

5. Check Version Compatibility #

Mixing old and new tool versions can cause silent failures:

• Ensure babel-loader version matches @babel/core (they need to be in sync for Babel 7).
• Uninstall any leftover Babel 6 packages (like babel-preset-react) to avoid conflicts with @babel/preset-react.

Start with these checks—most unexpected token errors in React + Webpack setups are fixed by one of these steps. If you’re still stuck, sharing your full package.json dependencies might help spot version mismatches!

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