Как преобразовать CoffeeScript в JavaScript (последние 2 версии и т. Е.> = 11), используя Browserify и coffeeify transform? - PullRequest
Новая
       98

Как преобразовать CoffeeScript в JavaScript (последние 2 версии и т. Е.> = 11), используя Browserify и coffeeify transform?

1 голос
/ 16 апреля 2019

CoffeeScript 2 выводит последний, современный синтаксис, который не совместим со старыми браузерами, и gulp-uglify . 

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

1 Ответ

1 голос
/ 16 апреля 2019

Трудно было с этим разобраться, поэтому оставьте здесь некоторый код на случай, если он может помочь другим.

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;
...