question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using generators/async-await etc. without modular bundler

See original GitHub issue

I’m not sure if this is the best place to ask, but here goes…

The documentation for this package says that,

If you’re attempting to use features such as generators, you’ll need to add transform-runtime as a plugin, to include the Babel runtime. Otherwise, you’ll receive the error: regeneratorRuntime is not defined.

Unfortunately, as noted in several previous issues this just yields the error “require is not defined” because:

This does not work because Babel does not handle module bundling. Generally you’d use gulp-babel to compile files that would be loaded in Node, which has its own module loader. To bundle code like this for a browser you’d want to use Webpack. — loganfsmyth

But Webpack, Browserify, Node module bundlers, etc. are not for everyone. Personally, I have no interest in having to set up complex module bundlers for every new project – especially not when they’re completely unnecessary, except for this one tiny aspect.

Is there some way to use gulp-babel to transpile ES6 to ES5 with these features, but without using a module bundler, yielding transpiled JS files that can be used as-is in a browser?

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:5
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
nicolo-ribaudocommented, Mar 2, 2020

You can add <script src="https://unpkg.com/browse/regenerator-runtime@0.13.4/runtime.js"></script> to your HTML file, before loading your JavaScript code. Then you don’t need transform-runtime, which requires a bundler.

0reactions
aprinciplecommented, Aug 17, 2020

plugins: [ ['@babel/transform-runtime'] ]

Read more comments on GitHub >

github_iconTop Results From Across the Web

Building without bundling: How to do more with less
Unbundled roadblock #1: Browsers don't yet support importing by package name (known as importing by “bare module specifiers”). Bundlers make ...
Read more >
What is module bundler and how does it work? - Tan Li Hau
It helps you to load your assets in dependency order, image asset, css asset, etc. To illustrate, imagine you are building a web...
Read more >
javascript - Importing web component without module bundler
I would like to solve this without using a module bundler like webpack. <script type="module" src="node_modules/@polymer/paper-button/paper- ...
Read more >
Intro to Module Bundlers - JavaScript in Plain English
Currently this file has no dependencies, so there's no reason to have a module bundler. Write console.log('hello world') in your index.js file.
Read more >
Building a TODO app without a bundler - DEV Community ‍ ‍
Code up your HTML documents, preview them in the browser without tools ... TODO app without any build tool, only native ES module...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found