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

Question

我有一个文件夹，里面有一堆javascript。我希望能够使用最近的js语法(特别是等待/异步)。但目标应该与大多数浏览器兼容。

由于这些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 (多个目的地)

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

在吞咽文件中：

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填充包含在与目标应用程序冲突的输出(而且非常大)中(应用程序还在重新定义startsWith函数)。

Answer 1

看起来您正在尝试建立一个开发环境。我建议你用webpack来代替喝一口，因为现在更有意义了。这是我用来做的指南：https://www.valentinog.com/blog/webpack-tutorial/。