windows環境にてgulp-babelを使用し、async-await記述によるAPI取得を試みていたのですが
chromeのコンソール上で下記エラーが発生し、変換できません。何か必要な設定が抜けているのでしょうか?
regeneratorRuntime is not defined
git-hubにて公開していますので宜しければお試しください。
github
https://github.com/oveRun777/sample
試したこと
圧縮前のコードを圧縮後のファイルにコピペし、読み込ませるとエラーは起きず、APIを取得できる
↑こちら試してみたので圧縮に問題があるのではないかと推測しました。
以下設定ファイル
.babelrcファイル
こちら"plugin"は文字色が違うのでたぶん機能していません。
gulp
1{ 2"presets": [ 3 [ 4 "@babel/preset-env", { 5 "targets": { 6 "node": "current" 7 } 8 } 9 ] 10], 11"plugins": [ 12 [ 13 '@babel/plugin-transform-runtime' 14 ] 15] 16}
gulpfile.babel.js
gulpmport
1import browserSync from 'browser-sync'; 2import sass from 'gulp-sass'; 3import uglify from 'gulp-uglify'; 4import rename from 'gulp-rename'; 5import babel from 'gulp-babel'; 6import imagemin from 'gulp-imagemin'; 7 8//sassのタスク設定 9gulp.task('sass', () => { 10 return gulp 11 .src('./working_dir/scss/*.scss') 12 .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 13 .pipe(rename({extname: '.min.css'})) 14 .pipe(gulp.dest('./public_dir/css')); 15}); 16gulp.task('file', () => { 17 return gulp 18 .src('./working_dir/**/*.html') 19 .pipe(gulp.dest('./public_dir/')); 20}); 21gulp.task('babel', () => { 22 return gulp 23 .src('./working_dir/js/*.js') 24 .pipe(babel({ 25 "presets": ["@babel/preset-env"] 26 })) 27 .pipe(uglify()) 28 .pipe(rename({extname: '.min.js'})) 29 .pipe(gulp.dest('./public_dir/js')); 30}); 31 32gulp.task('imagemin', function() { 33 gulp.src('./working_dir/images/*') 34 .pipe(imagemin()) 35 .pipe(gulp.dest('./public_dir/images/')); 36}); 37 38//browser-syncのタスク設定 39gulp.task('serve', done => { 40 browserSync.init({ 41 server: { 42 baseDir: './public_dir', 43 index: 'index.html' 44 } 45 }); 46 done(); 47}); 48 49//ファイルの監視タスク設定 50gulp.task('watch', () => { 51 const browserReload = done => { 52 browserSync.reload(); 53 done(); 54 }; 55 gulp.watch('./public_dir/**/*', browserReload); 56 gulp.watch('./working_dir/**/*', gulp.series('file')); 57 gulp.watch('./working_dir/scss/*.scss', gulp.series('sass')); 58 gulp.watch('./working_dir/images/*', gulp.series('imagemin')); 59 // gulp.watch('./working_dir/js/*.js', gulp.series('lint')); 60 gulp.watch('./working_dir/js/*.js', gulp.series('babel')); 61}); 62 63gulp.task('default', gulp.series('serve', 'watch'));
圧縮、変換前ファイル:themdsse.js
javascript
1const USERS_API = "https://jsonplaceholder.typicode.com/users"; 2async function callApi() { 3 const res = await window.fetch(USERS_API); 4 const users = await res.json(); 5 console.log(users); 6} 7 8callApi();
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/02 03:56