即使在安装了plugin-transform-runtime之后,也未定义regeneratorRuntime Gulp Babel v7

vltsax25  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(122)

我有一个JS项目,我试图使用async/await,我已经安装了相关的包来转换运行时,但仍然得到这个错误:
未定义regeneratorRuntime
我错过了什么?
package.json

"dependencies": {
  "@babel/core": "^7.14.0",
  "@babel/plugin-transform-runtime": "^7.13.15",
  "@babel/preset-env": "^7.14.1",
  "bootstrap": "4.6.0",
  "eslint": "7.21.*",
  "gulp": "4.0.2",
  "gulp-autoprefixer": "7.0.*",
  "gulp-babel": "^8.0.0",
  "gulp-concat": "2.6.*",
  "gulp-eslint": "6.0.*",
  "gulp-minify": "3.1.*",
  "gulp-sass": "4.1.*",
  "gulp-stylelint": "13.0.*",
  "stylelint": "13.11.*"
},

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
const concat = require('gulp-concat')
const minify = require('gulp-minify')
const eslint = require('gulp-eslint')
const autoprefixer = require('gulp-autoprefixer')

// build the JS
gulp.task('build-js', () =>
  gulp.src([
    'src/js/plugins/input.js'
  ])
  .pipe(concat('output.js'))
  .pipe(babel({
    presets: [['@babel/env', { modules: false }]]
  }))
  .pipe(minify())
  .pipe(gulp.dest('src/assets/js/'))
);
r55awzrz

r55awzrz1#

我也遇到了同样的问题。解决办法是将output.js文件与node_modules/regenerator-runtime/runtime.js文件连接起来。基本上你只需要在你的网站中的某个地方加载这个文件。
我没有发现需要@babel/plugin-transform-runtime,但我仍然理解这一切是如何工作的,所以让我知道是否有必要。
下面是一个可能的gulpfile.js

'use strict';

// Import `src` and `dest` from gulp for use in the task.
const { series, parallel, src, dest } = require("gulp")

// Import Gulp plugins.

// CSS related
const sass = require('gulp-sass')(require('sass')); // compile scss to css
const autoprefixer = require('gulp-autoprefixer'); // add vendor prefixes to css for older browsers
const cleanCSS = require('gulp-clean-css'); // minify css

// JS related
const babel = require("gulp-babel"); // compile JS for older browsers
const uglify = require("gulp-uglify"); // minify JS

const concat = require("gulp-concat"); // concatenate files
const del = require("del"); // delete files
const plumber = require("gulp-plumber"); // Stop at gulp errors

const destDir = './dist';
const paths = {
    styles: {
        src: './sass/**/*.scss',
        dest: `${destDir}/css/`,
        bundleName: `main.css`
    },
    scripts: {
        src: './js/**/*.js',
        dest: `${destDir}/js/`,
        bundleName: `main.js`
    }
};

function clean() {
    return del([paths.styles.dest, paths.scripts.dest])
}

function delTemp() {
    return del([tempDir]);
}

function jsDeps() {
    const files = [
      "node_modules/regenerator-runtime/runtime.js"
    ]
    return (
      src(files)
        .pipe(plumber())
        // Combine these files into a single main.deps.js file.
        .pipe(concat("main.deps.js"))
        .pipe(uglify())
        // Save the concatenated file to the tmp directory.
        .pipe(dest(tempDir))
    )
}

function jsBuild() {
    // This will grab any file within js/ or its
    // subdirectories, then ...
    return src(paths.scripts.src)
        // Stop the process if an error is thrown.
        .pipe(plumber())
        // Concatenate all files within src/components and its
        // subdirectories into a single file named main.js.
        .pipe(concat("main.build.js"))
        // Transpile the JS code using Babel's preset-env.
        .pipe(
            babel({
                presets: [
                    [
                        "@babel/env",
                        {
                            modules: false
                        }
                    ]
                ]
            })
        )
        // Minify the self-authored bundle.
        .pipe(uglify())
        // Save each component as a separate file in dist.
        .pipe(dest(tempDir));
}

function jsConcat(done) {
    // An array of the two temp (concatenated) files.
    const files = [`${tempDir}/main.deps.js`, `${tempDir}/main.build.js`]
    return (
      src(files)
        .pipe(plumber())
        // Concatenate the third-party libraries and our
        // homegrown components into a single main.js file.
        .pipe(concat(paths.scripts.bundleName))
        // Save it to the final destination.
        .pipe(dest(paths.scripts.dest))
    )
}

function sassBuild() {
    return src(paths.styles.src)
        .pipe(plumber())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(concat(paths.styles.bundleName))
        .pipe(cleanCSS())
        .pipe(dest(paths.styles.dest));
}

const build = series(clean, parallel(series(jsDeps, jsBuild, jsConcat), sassBuild), delTemp);

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.sassBuild = sassBuild;
exports.jsBuild = jsBuild;
exports.build = build;

// Gulp 4 uses exported objects as its tasks. Here we only have a
// single export that represents the default gulp task.
exports.default = build;

相关问题