Babel не конвертирует ES6 в JavaScript, что понятно браузерам

Я использую Gulp в качестве диспетчера задач и Babel для преобразования моей программы ES6 в версию, понятную для браузеров, а не для Node!

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

И в src/app.js Я имею:

import { square, diag } from 'lib';
//Some code here....

Но когда я запускаю gulp, он создает файл в dist но он конвертирует import который в app.js подать в require Ключевое слово, которое не понятно для браузеров... Я думал, что bable слиться imported файлы в src/app.js в один файл в dist

Как я могу преобразовать код моей библиотеки для поддержки браузерами, использующими Babel?

Источник

2 ответа

Решение

В основном Babeljs конвертирует ES6 в ES5. Представьте, что у вас есть код ES6:

const secret = ({ msg = 'es 6 hey!'} = {}) => () => msg;

Приведенный выше код написан на ES6, и Babeljs поможет вам преобразовать его в ES5:

'use strict';

var secret = function secret() {
  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  var _ref$msg = _ref.msg;
  var msg = _ref$msg === undefined ? 'es 6 hey!' : _ref$msg;
  return function () {
    return msg;
  };
};

А также require не является [текущим] стандартом JavaScript, вам нужна сторонняя библиотека, которая также имеет функцию с именем requireбиблиотеки, такие как http://requirejs.org/, http://browserify.org/ и т. д.

Даже если у вас есть программа ES6, которая включает в себя любые export или же import ключевые слова, когда вы работаете с Babili (онлайн-конвертер ES6 в ES5), который уведомит вас о том, что эти преобразованные ключевые слова не поддерживаются браузерами:

require не поддерживается в браузере, вам нужна среда commonjs, такая как node.js/io.js, browserify/webpack и т. д.

Онлайн демо

Источник

Работа Бабеля в том, чтобы перенести. Объединение и минимизация скриптов - отдельная задача.

Вам нужно добавить Browserify, Webpack, RequireJS и т. П., А затем сообщить Babel, что это то, что вы используете, чтобы он испускал код для их использования. Некоторая дополнительная информация на странице настройки.

Источник
Другие вопросы по тегам