Как добавить отдельные заливки, используя Babel 7 и Gulp? - PullRequest
Новая
       22

Как добавить отдельные заливки, используя Babel 7 и Gulp?

1 голос
/ 05 февраля 2020

Я недавно обновился до Babel 7 с помощью Gulp 4. После развертывания своего кода я понял, что есть IE 11 проблем совместимости, а также проблем с ранними версиями браузера Microsoft Edge (16, 17, 18), где Symbol is undefined возвращается. Я пока не использую ES6 в своем коде, но использую такие функции, как .includes(), .startsWith.() и синтаксис Spread. Для этого мне нужно добавить несколько заливок, но все мои попытки сделать это были безуспешными.

Скомпилированный код - это просто старый JS файл, используемый на веб-сайте, и не является частью Реакция сборки или что-нибудь.

пакет. json

"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/register": "^7.8.3",
    "babel-eslint": "^10.0.3",
    "del": "^5.1.0",
    "eslint": "^6.8.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^6.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-terser": "^1.2.0"
},
"dependencies": {
    "@babel/runtime": "^7.8.4",
    "core-js": "^3.6.4",
    "lodash": "^4.17.15"
}

gulpfile.babel. js (включая только используемую функцию для задачи сборки) 

function createBuildTask(destination) {
    var sourceArray = [ // simplified for this posting
        'file1.js', 'file2.js', 'file3.js', 'file4.js'
    ];

    return function () {
        return gulp.src(sourceArray, {'allowEmpty': true})
            .pipe(babel({
                'presets': ['@babel/preset-env'],
                'plugins': []
            }))
            .pipe(concat('desktop-built.js'))
            .pipe(gulp.dest('desktop/dist'))
            .pipe(terser())
            .pipe(rename({
                'extname': '.min.js'
            }))
            .pipe(gulp.dest('desktop/dist'));
    };
}

Что я пробовал :

  1. Передача параметров в @ babel / preset-env, но все, что я получаю, - это несколько дубликатов строк var _typeof = require("@babel/runtime/helpers/typeof"); во встроенном коде, что ничего не делает для устранения вышеупомянутых ошибок в IE.

    'presets': [['@babel/preset-env', { 'modules': false, 'useBuiltIns': 'entry', 'corejs': 3 }]], 'plugins': ['@babel/plugin-transform-runtime']

  2. Передача в @ babel / preset-env без каких-либо опций:

    "presets": ["@babel/preset-env"], "plugins": []

Но все это добавляет следующее к моему код, и ошибка Symbol is undefined все еще возвращается в IE. 

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Конечно, это должно быть проще, чем это?

...