Babelを使ってES6からES5にトランスパイルする

公開日 2020/9/12

compatibility table

src/js/main.jsを作成する

'use strict';

const init = () =>{//アローファンクション
    alert(hello('Bob','Tom'));
};


function hello(...args){//レストパラメーター
    return args.reduce((accu, curr) => {
        return 'hello hello!${accu}${curr}';
    });
}

document.addEventListener('DOMContentLoaded',event => {
    init();
});

ES6のアローファンクションと、レストパラメーターをES5にトランスパイルする。

gulpfile.js

const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server =  browserSync.create();

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

function scripts(){//ここを付け加える
    return src('./src/js/*.js')
    .pipe($.babel())
    .pipe(dest('./dist/js'));
}

function startAppServer(){
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    watch('./src/**/*.scss', styles);
    watch('./src/**/*.scss').on('change', server.reload);
}

exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.serve = startAppServer;

以下実行してインストール

yarn add @babel/core @babel/preset-env gulp-babel

@babel/coreはBabelのコアファイル

@babel/preset-envはES6以降のJSをES5に直すときに使う

gulp-babelはgulpからbabelを操作する際に使うプラグイン

src/.babelrcを作成

{
    "presets":["@babel/preset-env"]
}

preset-envをトランスパイラの設定ファイルとして使えるようになる

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="32×32" href="images/icon/favicon-32×32.png">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
    <title>Document</title>
</head>
<body>
<h1>test</h1>
</body>
</html>

gulp scripts実行

main.jsがコンパイルされる

source.mapを使う

gulpfile.js

const {src, dest, watch} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();
const pkg = require('./package.json');
const conf = pkg["gulp-config"];
const sizes = conf.sizes;
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const server =  browserSync.create();

function icon(done){
    for(let size of sizes){
        let width = size[0];
        let height = size[1];
         src('./favicon.png')
            .pipe($.imageResize({
                width,
                height,
                crop: true,
                upscale: false
            }))
            .pipe($.imagemin())
            .pipe($.rename(`favicon-${width}×${height}.png`))
            .pipe(dest('./dist/images/icon'));
        }
        done();
    }

function styles(){
    return src('./src/sass/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass())
        .pipe($.postcss([
            autoprefixer({
                "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"],
                cascade: false
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(dest('./dist/css'));
}

function scripts(){
    return src('./src/js/*.js')
    .pipe($.sourcemaps.init())//ここを付け加える
    .pipe($.babel())
    .pipe($.sourcemaps.write('.'))//ここを付け加える
    .pipe(dest('./dist/js'));
}

function startAppServer(){
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    watch('./src/**/*.scss', styles);
    watch('./src/**/*.scss').on('change', server.reload);
}

exports.icon = icon;
exports.styles = styles;
exports.scripts = scripts;
exports.serve = startAppServer;

gulp scriptsを実行

main.js.mapが作成される

BLOG

Babelを使ってES6からES5にトランスパイルする

source.mapを使う

Related posts