将一堆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 polyfill包含在输出中（并且它非常大）与目标应用程序冲突（应用程序也重新定义startsWith函数）。

Answer 1

看起来您正在尝试设置开发环境。我建议使用webpack而不是gulp，因为它现在更具相关性。这是我用来设置一个的指南：https://www.valentinog.com/blog/webpack-tutorial/。