将一堆ES7 JS文件转移到兼容的文件中

Question

我有一个带有一堆JavaScript的文件夹。我希望能够使用最近的JS语法（尤其是等待/异步）。但是目标应与大多数浏览器兼容。

由于这些JavaScript文件将被独立使用（将在第三方应用程序中导入为插件），所以我想尊重这些方案：

• src/file1.js ==＆gt;dist/file1.js
• src/sub/file2.js ==＆gt;dist/sub/file2.js
• ...

每个文件都应转移到ES5 JS文件中。

我正在使用Gulp 4作为构建工具。

如何实现我的目标？

第一次尝试：使用babel-gulp：

import gulp from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import babel from 'gulp-babel';
const javascript = () => {
    return gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            "presets": [
                ["@babel/preset-env", {
                    "targets": {
                        "browsers": [">0.25%", "not ie 11", "not op_mini all"]
                    }
                }]
            ]
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
};

构建成功，但是在运行时，它会失败ReferenceError: regeneratorRuntime is not defined

第二次尝试，使用浏览和 @babel/polyfill，灵感来自浏览 globs（多个目的地）

在我的JavaScript文件的顶部添加了require("@babel/polyfill");。

在Gulp文件中：

const javascript2 = () => {
    return gulp.src('src/**/*.js', {
            read: false
        }) // no need of reading file because browserify does.
    .pipe(tap(function(file) {
            file.contents = browserify(file.path).bundle();
        }))
        .pipe(buffer())
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
};

构建成功，但该文件没有被转移（呈异步的关键字），此外，整个babel polyfills都包含在输出中（并且很大）与目标应用发生冲突（该应用程序也正在重新定义startswith函数）。

Answer 1

看起来您正在尝试设置开发环境。我建议使用webpack代替吞吐，因为如今它更有意义。这是我用来设置一个的指南：https：//www.valentinog.com/blog/webpack-tutorial/。