即使在插件转换运行时安装之后，regeneratorRuntime也没有定义Gulp Babel v7

Question

我有一个JS项目，我正在尝试使用async/await，我已经安装了相关的包来转换运行时，但仍然会收到这个错误：

regeneratorRuntime未定义

我缺少什么？

软件包.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.*"
},

gullfile.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/'))
);

Answer 1

我也遇到了同样的问题。解决方案是将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;