New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple transformer for ECMAScript 2015 modules via gulp? #9274

Closed
QJan84 opened this Issue Jan 3, 2019 · 7 comments

Comments

Projects
None yet
4 participants
@QJan84
Copy link

QJan84 commented Jan 3, 2019

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

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Jan 3, 2019

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

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Jan 3, 2019

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

This comment has been minimized.

Copy link

QJan84 commented Jan 4, 2019

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

This comment has been minimized.

Copy link

QJan84 commented Jan 8, 2019

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

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Jan 8, 2019

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

This comment has been minimized.

Copy link

QJan84 commented Jan 9, 2019

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

This comment has been minimized.

Copy link
Member

loganfsmyth commented Jan 12, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment