Javascript 吞巴别塔异步/等待

正在尝试缩小文件并直接在浏览器上运行它

我用大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口。问题在于我尝试使用异步/等待函数时

package.json

{
    "@babel/core": "^7.11.6",
    "@babel/plugin-transform-async-to-generator": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.11.5",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    ...
}

文件

const i = async () => {
    return await fetchAll();
};

咕噜咕噜/Babel配置

const BabelConfig = {
    presets: ['@babel/env'],
    plugins: ['@babel/plugin-transform-async-to-generator']
};
const imports = ['./dev/**.*.js'];
return gulp.src(imports)
    .pipe(babel(BabelConfig))
    .pipe(concat('min.js'))
    .pipe(gulp.dest(paths.dist.js));

const BabelConfig = {
    presets: ['@babel/env'],
    plugins: ['@babel/plugin-transform-async-to-generator', '@babel/plugin-transform-runtime']
};
const imports = ['./dev/**.*.js'];
return gulp.src(imports)
    .pipe(babel(BabelConfig))
    .pipe(concat('min.js'))
    .pipe(gulp.dest(paths.dist.js));

这只是抛出了“regeneratorRuntime未定义”

所以我尝试添加“@babel/plugin transform runtime”

咕噜咕噜/Babel配置

const BabelConfig = {
    presets: ['@babel/env'],
    plugins: ['@babel/plugin-transform-async-to-generator']
};
const imports = ['./dev/**.*.js'];
return gulp.src(imports)
    .pipe(babel(BabelConfig))
    .pipe(concat('min.js'))
    .pipe(gulp.dest(paths.dist.js));

const BabelConfig = {
    presets: ['@babel/env'],
    plugins: ['@babel/plugin-transform-async-to-generator', '@babel/plugin-transform-runtime']
};
const imports = ['./dev/**.*.js'];
return gulp.src(imports)
    .pipe(babel(BabelConfig))
    .pipe(concat('min.js'))
    .pipe(gulp.dest(paths.dist.js));

但现在我得到了“需求未定义”

---

有人知道如何做到这一点吗？

你就快到了！我有一个类似的问题，问题是编译后的Gulp代码包含了大多数浏览器不支持的“require”语句。对我来说，解决这个问题的方法是将Webpack添加到Gulp工作流以捆绑所有内容：

npm install --save-dev webpack webpack-cli webpack-stream

在您的gulpfile.js中：

const {src, dest, watch} = require('gulp');
const gulpBabel = require('gulp-babel');
const webpack = require('webpack-stream');
const compiler = require('webpack');

function myES6Transpiler() {
    return src('./es6/utilities.js')
        .pipe(gulpBabel({
            presets: ['@babel/preset-env', 'babel-preset-minify'],
            plugins: ['@babel/transform-runtime', '@babel/plugin-transform-async-to-generator'],
        }))
        .pipe(webpack(require('./webpack.config-util.js'), compiler, function (err, stats) {
            /* Use stats to do more things if needed */
        }))
        .pipe(dest('./js/'))
}

exports.myES6Transpiler = myES6Transpiler;

您还需要添加一个网页包配置文件： webpack.config.js

module.exports = {
    mode: "production",
    output: {
        filename: "utilities.js"
    }
}