Question

我有一个奇怪的问题，希望能得到一些帮助。

我有一个WordPress主题，我正在使用包括gulp＆babel在内的开发设置进行开发。我有一个托管提供商，提供开发环境和生产环境。到现在为止，我还没有构建主题，将主题上传到开发环境并进行测试的问题-一切都非常顺利。

现在，我试图将相同的主题（我说的完全一样）上传到生产站点而不是开发站点，并且在控制台中出现以下错误：

Error retrieving XXX:  ReferenceError: regeneratorRuntime is not defined
    at bundle.js?ver=1.0.0:726
    at S (bundle.js?ver=1.0.0:726)
    at window.initMap (bundle.js?ver=1.0.0:726)
    .....

我搜索的所有内容都表明，人们在尝试构建或运行其开发环境时遇到了这个问题，这与他们的gulp或babel设置或所使用的软件包有关。因此，我将在下面添加我的配置...尽管我为为什么在一个环境中无错误构建和运行主题而在另一个环境中无此错误而感到困惑。

gulpfile.babel.js

// Gulp.js configuration
'use strict';

import "regenerator-runtime/runtime.js";
import "core-js/stable";

const

  // Gulp and plugins
  { src,
    dest, 
    watch, 
    series, 
    parallel 
  }             = require('gulp'),
  imagemin      = require('gulp-imagemin'),
  autoprefixer  = require('autoprefixer'),
  cssnano       = require('cssnano'),
  sass          = require('gulp-sass'),
  sourcemaps    = require('gulp-sourcemaps'),
  postcss       = require('gulp-postcss'),
  gulpif        = require('gulp-if'),
  cleanCss      = require('gulp-clean-css'),
  yargs         = require('yargs'),
  del           = require('del'),
  webpack       = require('webpack-stream')
 
[...]

// Task to build js file as bundle.js
export const scripts = () => {
  return src([
    js.src + 'map.js',
    js.src + 'bundle.js'
  ])
  .pipe(webpack({
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            }
          }
        }
      ]
    },
    optimization:{
      namedChunks: true,
      minimize: true, 
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'async'
          },
        }
      }
    },
    mode: PRODUCTION ? 'production' : 'development',
    devtool: !PRODUCTION ? 'inline-source-map' : false,
    output: {
      filename: js.filename
    },
  }))
  .pipe(dest(js.build))
}

[...]

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": "> 0.25%, not dead",
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}

我尝试更新package.json以将@ babel / runtime用作依赖项，以及regenerator-runtime，我认为它不会做任何事情-却没有。

package.json

"browserslist": [
        "last 3 and_chr versions",
        "last 3 chrome versions",
        "last 3 opera versions",
        "last 3 ios_saf versions",
        "last 3 safari versions"
    ],
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/plugin-transform-runtime": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "@babel/register": "^7.10.5",
        "autoprefixer": "^9.8.5",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.1.0",
        "browser-sync": "^2.26.7",
        "core-js": "^3.6.5",
        "cssnano": "^4.1.10",
        "del": "^5.1.0",
        "eslint": "^6.8.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^7.0.1",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-if": "^3.0.0",
        "gulp-imagemin": "^7.1.0",
        "gulp-notify": "^3.2.0",
        "gulp-postcss": "^8.0.0",
        "gulp-sass": "^4.1.0",
        "gulp-sourcemaps": "^2.6.5",
        "scss": "^0.2.4",
        "vinyl-named": "^1.1.0",
        "webpack-stream": "^5.2.1",
        "yargs": "^15.4.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.10.5",
        "moment": "^2.27.0",
        "regenerator-runtime": "^0.13.5",
        "snazzy-info-window": "^1.1.1"
    }

引发错误的特定代码在我的map.js中（从wp-rest api中提取自定义帖子，并在Google地图上填充它们），如下所示：

import 'regenerator-runtime/runtime'; // top of file

[...]

const getXXX = () => {
    try{
      async function fetchXXX() {
        const res = await fetch(url);

        if(!res.ok){
          console.log('Error retrieving XXX:', res.status);
          throw new Error(res.status);
        }
        const data = await res.json();
        return data;
      }

      fetchXXX()
      .then(data => {
        xxx = data;
        renderXXX();
      })
      .catch(error => {
        console.log('Error retriving XXX: ', error);
      });
    } catch (err) {
      console.log('Error retrieving XXX: ', err);
    } 
  }

如果有人有任何指针，将不胜感激。

Answer 1

对于将来偶然发现此问题的人（可能不太可能）。

事实证明，罪魁祸首是我们的生产环境中使用的CDN。我发现我上载的bundle.js文件与站点中提供的文件不同，并关闭了CDN，这似乎可以解决问题。：/

错误参考错误：未定义regeneratorRuntime（Chrome控制台错误-在gulp / babel构建期间未发生）

1 个答案: