Simple transformer for ECMAScript 2015 modules via gulp?

[QJan84]

How can I insert functions via import into a .js file?

My source test script (test.js):

import anime from 'animejs';
import flatpickr from "flatpickr";

const eee = 'test-eee';
console.log(eee);

I use gulp-babel as JavaScript Transpiler.

My babel devDependencies.

    "@babel/core": "^7.2.2",
    "@babel/helper-module-imports": "^7.0.0",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.2.3"

My .babelrc:

{
  "presets": [
    [
      "@babel/preset-env", {
        "debug": true,
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-modules-commonjs", {
        "noInterop": true
      }
    ]
  ]
}

After I started the gulp task I get the following:

"use strict";

var _animejs = require("animejs");

var _flatpickr = require("flatpickr");

var eee = 'test-eee';
console.log(eee);

But now animejs and flatpickr should be included in the file.

[babel-bot]

Hey @QJan84! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

I'm not sure that I understood the question: do you want those modules to be inserted in the output file? Is yes, I suggest looking at Rollup or WebPack.

[QJan84]

do you want those modules to be inserted in the output file?

Exactly!

But how does it work with gulp-newer? The task should only start if files have been changed.
Is there no babel plugin, which inserts the modules in the output fle?

Maybe webpack-stream?

[QJan84]

Is there no way to do that with babel? I thought this is the @babel/preset-env there?

Is it really that hard to get it?

I just want the scripts
import anime from 'animejs';
import flatpickr from "flatpickr";
inserted into a file as vanilla js. So the browser can read this.

[nicolo-ribaudo]

Babel only transpiles a single file, it can't merge multiple files. If you don't want to use a module bundler, you could set the "modules": "amd" option of preset-env and use RequireJS to load the dependencies.

[QJan84]

Am I the first one to have this problem ?! It is to be crazy...
I tested webpack-stream but I do not understand that.
Now I've tried rollup and that does not work either. I hope for help. My gulp task:

gulp.task("js-babel-main", () => {
  console.log($.chalk.yellow.bold('--> JS::MAIN - Transpiling Javascript via Babel'));
  return gulp.src(pkg.paths.src.js + '**/*.js')
    .pipe($.plumber({
      errorHandler: onError
    }))
    // .pipe($.newer({
    //   dest: pkg.paths.build.js,
    //   ext: '.js',
    //   extra: pkg.paths.src.js + '**/*'
    // }))
    .pipe($.size({
      gzip: true,
      showFiles: true
    }))
    .pipe($.betterRollup({
      input: pkg.paths.src.js + '**/*.js',
      format: 'iife',
      plugins: [
          $.rollupPluginMultiEntry(),
          // so Rollup can find `ms`
          $.rollupPluginNodeResolve(),
          // so Rollup can convert `ms` to an ES module
          $.rollupPluginCommonjs()
      ]
    }))
    .pipe($.babel())
    .pipe($.flatten())
    .pipe(gulp.dest(pkg.paths.build.js))
    .pipe($.filter("**/*.js"))
    .pipe($.browserSync.stream());
});

My Output: (tried to import swiper.js - a touch slider)

(function (swiper) {
  'use strict';

  swiper = swiper && swiper.hasOwnProperty('default') ? swiper['default'] : swiper;
  console.log("The 'Swiper' script should be inserted here.");
})(swiper);

My terminal log:

[14:00:59] Starting 'js-babel-main'...
--> JS::MAIN - Transpiling Javascript via Babel
[14:01:00] nav-main-desktop.js 20 B (gzipped)
Generated an empty bundle
@babel/preset-env: `DEBUG` option

Using targets:
{
  "ie": "9"
}

Using modules transform: false

Using plugins:
  transform-template-literals { "ie":"9" }
  transform-literals { "ie":"9" }
  transform-function-name { "ie":"9" }
  transform-arrow-functions { "ie":"9" }
  transform-block-scoped-functions { "ie":"9" }
  transform-classes { "ie":"9" }
  transform-object-super { "ie":"9" }
  transform-shorthand-properties { "ie":"9" }
  transform-duplicate-keys { "ie":"9" }
  transform-computed-properties { "ie":"9" }
  transform-for-of { "ie":"9" }
  transform-sticky-regex { "ie":"9" }
  transform-dotall-regex { "ie":"9" }
  transform-unicode-regex { "ie":"9" }
  transform-spread { "ie":"9" }
  transform-parameters { "ie":"9" }
  transform-destructuring { "ie":"9" }
  transform-block-scoping { "ie":"9" }
  transform-typeof-symbol { "ie":"9" }
  transform-new-target { "ie":"9" }
  transform-regenerator { "ie":"9" }
  transform-exponentiation-operator { "ie":"9" }
  transform-async-to-generator { "ie":"9" }
  proposal-async-generator-functions { "ie":"9" }
  proposal-object-rest-spread { "ie":"9" }
  proposal-unicode-property-regex { "ie":"9" }
  proposal-json-strings { "ie":"9" }
  proposal-optional-catch-binding { "ie":"9" }

Using polyfills with `usage` option:

[C:\Users\qjan8\Websites\boilerplate-2019-goldorange\src\main\js\nav-main-desktop.js] Based on your code and targets, none were added.
[14:01:00] nav-main-mobile.js 4.55 kB (gzipped)
'swiper' is imported by src\main\js\nav-main-mobile.js, but could not be resolved – treating it as an external dependency
'default' is imported from external module 'swiper' but never used
No name was provided for external module 'swiper' in output.globals – guessing 'swiper'

[C:\Users\qjan8\Websites\boilerplate-2019-goldorange\src\main\js\nav-main-mobile.js] Based on your code and targets, none were added.
[14:01:01] validation.js 20 B (gzipped)
[14:01:01] all files 4.59 kB (gzipped)
Generated an empty bundle

[C:\Users\qjan8\Websites\boilerplate-2019-goldorange\src\main\js\validation.js] Based on your code and targets, none were added.
[14:01:01] Finished 'js-babel-main' after 1.52 s

[loganfsmyth]

Webpack's docs have examples of how to use it with Gulp: https://github.com/webpack/docs/wiki/usage-with-gulp#normal-compilation Using streams is not necessary, I'd use the callback-based task interface.