Использование функций es7 с Babel

Я хотел бы включить функции es7 в свой проект, чтобы начать использовать в нем асинхронный способ ожидания fetch.

Я использую gulp, browserify и babelify (7.2.0), читая некоторые документы, я увидел, что способ сказать, что babelify использует функции es7, включает эту строку в преобразование babelify:

optional: ['runtime', 'es7.asyncFunctions']

Итак, вся моя задача gulp выглядит следующим образом:

gulp.task('js',function(){



var bundleStream = browserify({

    entries:[config.paths.mainJs],
    debug: true,

    transform: [babelify.configure({
        presets:["es2015","react"],
        optional: ['runtime', 'es7.asyncFunctions']
    })]


}).transform("browserify-shim")
    .bundle()
    .on('error',console.error.bind(console))




bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
   // .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))


});

К сожалению, я получаю следующую ошибку при выполнении задачи:

"Неизвестный параметр: base.Optional при анализе файла:"

Немного погуглив, я увидел, что babelify 7.x действительно использует babel 6.0, и, по-видимому, этот необязательный параметр больше не существует в babel 6.0.

Я не хочу понижать версию моей версии babelify, чтобы это работало, но вместо этого я хотел бы включить функции es7 в версию 7 babelify, кто-нибудь знает, как это сделать?

Любая помощь будет очень признательна, так как информации об этом не так много

На всякий случай найдите также мой файл package.json:

"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
 },
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
 },
"browserify": {
"transform": [
  "browserify-shim"
]
 },
 "browserify-shim": {
   "jquery": "$"
   }

javascript babeljs gulp browserify ecmascript-2016
person fgonzalez    schedule 09.01.2016    source источник
comment
на самом деле ES7 или ES6, и заголовок добавлен по ошибке, потому что ваш пресет выглядит как пресеты:[es2015,react],   -  person Venkat.R    schedule 09.01.2016
comment
Как это должно выглядеть при использовании es7?   -  person fgonzalez    schedule 09.01.2016
comment
Название вашего вопроса: Использование функций es7 с Babel   -  person Venkat.R    schedule 09.01.2016
comment
Извините, не совсем понял, я здесь новенький. Я хочу иметь возможность использовать этот код в своем приложении: this.lang = await fetch(url).then(res => res.json()). Для этого мне нужно правильно включить функции es7, и мы делаем это, настроив его на babelify, верно?   -  person fgonzalez    schedule 09.01.2016

Ответы (1)


arrow_upward
7
arrow_downward 

optional: ['runtime', 'es7.asyncFunctions']

как вы настраиваете Babel 5. Вы используете Babel 6, так что будет

plugins: ['transform-runtime', 'transform-async-to-generator']

Следует отметить, что настраивать Babel через Babelify не рекомендуется. Вместо этого лучше создать файл .babelrc в корне вашего приложения с JSON в нем, например.

{
  presets:["es2015","react"],
  plugins: ['transform-runtime', 'transform-async-to-generator']
}

и npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator

person loganfsmyth    schedule 09.01.2016
comment
Спасибо, но не повезло :( Неожиданный токен (18:26) ему не нравится слово ожидания - person fgonzalez; 10.01.2016
comment
Моя ошибка, я забыл пометить функцию, в которой я использовал ожидание, как «асинхронную», но ваша конфигурация работала как шарм, еще раз спасибо!!! - person fgonzalez; 10.01.2016
comment
Кстати, я обнаружил, что это работает и без плагинов, если я добавлю пресет stage-0, в чем разница и что бы вы порекомендовали использовать? - person fgonzalez; 10.01.2016
comment
Предложения имеют этапы. babel-preset-stage-0 включает все экспериментальные функции на уровне stage ›= 0, включая асинхронные функции и многое другое. Вы можете увидеть плагины для каждого этапа, щелкнув пресеты на babeljs.io/docs/plugins. - person loganfsmyth; 10.01.2016