javascriptvisual-studiogulpmaterial-designgulp-babel

Visual Studio Gulp Babel Resolve Imports


How to make gulp-babel resolve the imports of a js file. Because right now it is running without error in visual studio but the imports are not resolved. Does the source directory of modules to import need to be specified - how to do that in the gulpfile.js?

gulpfile.js

"use strict";

 var gulp = require("gulp");
 var babel = require("gulp-babel");

 gulp.task("js", function () {
     return gulp.src('./wwwroot/js/app.js')
     .pipe(babel())
     . pipe(gulp.dest('./wwwroot/js/babel'));
 });

app.js:

import { MDCRipple } from '@material/ripple';
import { MDCTextField } from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Solution

  • This solved the issue:

    https://github.com/babel/babelify/issues/247

    In my current understanding the issue was: the dependencies are not being transpiled to a javascript version understandable by browserify.

    [What worked]

    gulpfile.js:

    "use strict";
    
    var gulp = require("gulp");
    var browserify = require('browserify');
    var source = require('vinyl-source-stream');
    var babelify = require('babelify');
    
    gulp.task("js", function () {
        browserify('./wwwroot/js/app.js')
            .transform("babelify", {
                global: true,
                presets: ["es2015", "es2016", "stage-0"],
                ignore: /\/node_modules\/underscore/
            })
            .bundle()
            .pipe(source('babel.js'))
            .pipe(gulp.dest('./wwwroot/js'));
    });
    

    package.json:

    {
        "version": "1.0.0",
        "name": "asp.net",
        "private": true,
        "devDependencies": {
            "babel-core": "6.26.3",
            "gulp": "3.9.1",
            "browserify": "15.0.0",
            "babelify": "8.0.0",
            "babel-preset-es2015": "6.24.1",
            "babel-preset-es2016": "6.24.1",
            "babel-preset-stage-0": "6.24.1",
            "vinyl-source-stream": "2.0.0",
            "material-components-web": "0.28.0"
        }
    }