将一堆ES7 js文件转换为兼容文件

Question

我有一个包含一堆JavaScript的文件夹。我希望能够使用最新的js语法（尤其是await / async）。但是目标应该与大多数浏览器兼容。

由于这些javascript文件将单独使用（将作为插件插入到第三方应用程序中），因此我想遵守以下方案：

• src/file1.js ==> dist/file1.js
• src/sub/file2.js ==> 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

第二次尝试，使用Browserify和@ babel / polyfill，灵感来自Browserify + Globs (multiple destination)

在我的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而不是gulp，因为这几天以来它的意义更大。这是我以前设置的指南：https://www.valentinog.com/blog/webpack-tutorial/。