如何使用Browserify和coffeeify转换将CoffeeScript转换为JavaScript (最新的2个版本和>= 11)？

Question

CoffeeScript 2输出与旧浏览器和gulp-uglify不兼容的最新现代语法。

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: operator «=», expected: punc «,»

Answer 1

我很难弄清楚这一点，所以在这里丢弃一些代码，以防它可以帮助其他人。

Gulp 4和CoffeeScript 2引入了破坏性更改，因此更新依赖项可能会很繁琐。

一个突破性的变化是，CoffeeScript现在输出了旧浏览器不支持的现代语法(它还破坏了gulp-uglify)。要支持这些浏览器(并继续使用gulp uglify)，transpilation是必需的。

安装程序包

npm install @babel/core @babel/preset-env browserify coffeeify coffeescript glob gulp gulp-sourcemaps gulp-uglify gulp-util merge-stream vinyl-buffer vinyl-source-stream --save-dev

编辑gulpfile.js

'use strict';

const gulp = require('gulp');
const gutil = require('gulp-util');
const merge = require('merge-stream');
const browserify = require('browserify');
const glob = require('glob');
const source = require('vinyl-source-stream');
const path = require('path');
const buffer = require('vinyl-buffer');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');

var minify;
if (process.env.MINIFY === 'true') {
    minify = true;
} else {
    minify = false;
}

function browserifyTask() {
    var files = glob.sync('./app/*.coffee');
    return merge(files.map(function(file) {
        return browserify({
            entries: file,
            extensions: ['.coffee'],
            debug: true
        })
        .transform('coffeeify', {
            transpile: {
                presets: [
                    [
                        '@babel/preset-env',
                        {
                            targets: {
                                browsers: ['last 2 versions', 'ie >= 11']
                            }
                        }
                    ]
                ]
            }
        })
        .on('error', gutil.log)
        .bundle()
        .pipe(source(path.basename(file, '.coffee') + ".js"))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe((minify === true) ? uglify().on('error', gutil.log) : gutil.noop())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('public/js'));
    }));
}

const build = gulp.series(browserifyTask);

exports.default = build;