search

babel / babel-standalone

:video_game: Now located in the Babel repo! Standalone build of Babel for use in non-Node.js environments, including browsers.
https://github.com/babel/babel/tree/master/packages/babel-standalone
MIT License
819 stars 121 forks source link

How to use plugins modules exports and imports? #60

Closed stefek99 closed 6 years ago

stefek99 commented 7 years ago

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

default export

I have following code:

<!doctype html>
<html>
<head>
    <title>Babel Test</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>

     <script data-plugins="transform-es2015-modules-umd" type="text/babel">
        export default function cube(x) {
          return x * x * x;
        }   
    </script>

</body>
</html>

I can export function cube but how do I import it?

Note that data-plugins="transform-es2015-modules-umd" is required, otherwise it will throw ReferenceError: exports is not defined

Daniel15 commented 7 years ago

I'm not sure how ES6 modules would work within the context of a browser - How would you define the module name, for example?

stefek99 commented 7 years ago

I'm sorry, not an expert here, and I know my case was pretty edgy...

I think I wanted to edit source file of some library and have it loaded directly into browser as I was working on limited environment (no admin rights, cannot install anything)

marcioacmauricio commented 7 years ago

I also need to use exports defaults in my work completion university course, if you can find a solution I will be grateful if you share

ChrisCinelli commented 7 years ago

I think if you have a jsFiddle, I may want to import external files. For example from rawgit.com

marcioacmauricio commented 7 years ago

https://jsfiddle.net/marcioacmauricio/o142f0d1/2/

brownieboy commented 7 years ago

Native module loading is coming to browsers. In fact, it's already available in Firefox, Safari and Edge, but only in pre-release versions, and then hidden behind a flag. Here's a very good blog post that gives an overview of the current state of play: https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview

I tested native module loading, using version 54 of the Firefox Nightly build with the dom.moduleScripts.enabled boolean flag set to true. This is bleeding edge stuff to be sure, but I can confirm that it does work!

It would be great if babel-standalone could somehow work together with native module loading to transpile React, for example.

How would one integrate the two though? One stumbling block is that native module loading requires that the initial script is loaded as<script type="module", whereas babel-standalone requires <script type="text/babel".

See also issue #71

chobo2 commented 7 years ago

What is the solution to get this to work?

jeffrafter commented 7 years ago

test.html:

<!doctype html>
<html>
<head>
  <title>Babel Test</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
  <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./cube.js"></script>
  <script data-plugins="transform-es2015-modules-umd" type="text/babel">
    import cube from 'cube'
    console.log(cube(3))
  </script>
</body>
</html>

cube.js

export default function cube(x) {
  return x * x * x;
}
ryanpcmcquen commented 6 years ago

Is there a solution for this? Should we move this to the main Babel repo for more exposure (now that standalone has moved)?

Daniel15 commented 6 years ago

I think https://github.com/babel/babel/pull/6223 should actually fix this.

If that PR doesn't fix it, let's open a new issue in the Babel repo 😃