Транспортируйте несколько файлов ES7 js в совместимые файлы - PullRequest
Новая
       24

Транспортируйте несколько файлов ES7 js в совместимые файлы

0 голосов
/ 20 февраля 2019

У меня есть папка с кучей 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 (многоцелевое назначение)

Добавлен require("@babel/polyfill"); поверх моих файлов javascript.

в файле 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 (и они довольно большие), что конфликтует с целевым приложением (приложение также переопределяетсяning запускается с функцией).

1 Ответ

0 голосов
/ 20 февраля 2019

Похоже, вы пытаетесь настроить среду разработки.Я бы предложил использовать webpack вместо gulp, потому что это более актуально в наши дни.Вот руководство, которое я использовал для его настройки: https://www.valentinog.com/blog/webpack-tutorial/.

...