Use Babel to transpile, import and export in the client, without Webpack?

Question

Can I use Babel to compile JSX and export vars through the global namespace?

I don't want to run a random Webpack server.

I'm already wrapping my head around ES6, JSX, Babel, and React, and couldn't care less about another library that complicates such a simple task

Ultimately I would like to export my React class and import in another. Theoretically, it should only block until the dependencies are met, and I don't understand how this could be an anti-pattern, since all of my code and external dependencies are cached locally.

This is default behavior for <script> tags, just not <script type="text/babel">

<script type="text/babel">
    var message = "hello world";
</script>

<script type="text/babel">
    console.log(message); // undefined
</script>

I'm fine with using ES6 export and import, but not another random file server

You don't need to use webpack server to use webpack. It seems like you're getting several things mixed up. Modules are not a simple thing to implement, Webpack and Browserify implement them for use in a browser. If you want to use modules, you'll need something that implements a module system. Webpack and browserify spit out a simple file that you'd drop into a — loganfsmyth, Jul 03 '16 at 17:55
By default, there's an ES6 in-browser module system which Babel seemingly breaks because of transpilation. I read that Babel actually removed import/export because ES6 spec says the files need to be statically analyzable, for some unknown reason — neaumusic, Jul 03 '16 at 22:04
Browsers will eventually support ES6 module syntax. Until they do, browsers have no concept of modular JS. What specifically did you read and where? What does static analysis have to do with Babel removing support for import/export (which it hasn't)? If you want modules, you need some kind of system in place to load and execute the modules based on their dependencies. Your questions seems to be asking how to do modules without that, which is contradictory. — loganfsmyth, Jul 04 '16 at 02:57
I read it here https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.jsgd94fbn really thought browsers do understand import export. I know that sequential script tags can definitely share the jQuery for example — neaumusic, Jul 04 '16 at 07:54
Scripts tags are not ES6 import/export. You are misunderstanding that article a bit. The part that Babel removed was not ES6 modules, it was one specific way Babel 5 did something. That blog post specifically calls out this answer of mine: http://stackoverflow.com/a/33506169/785065 which explains what was changed. — loganfsmyth, Jul 04 '16 at 08:34

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

EDIT: Apparently export and import functionality was removed from Babel. I'm not sure why, but it has to do with ES6 compliance and possibly security?

Anyways, if you're determined to put them in separate files for dev purposes:

Put the class on a shared object (window)

SuperClass.js must be included before SubClass.js

class MySuperClass () {
    constructor (config) {
        super(config);
    }
}

window.MySuperClass = MySuperClass;

var MySuperClass = window.MySuperClass;

class MySubClass extends MySuperClass () {
    constructor (config) {
        super(config);
    }
}

I'm not sure if this works for very large classes that take Babel a while to transpile

It seems to work so far, will update if I find another solution

Use Babel to transpile, import and export in the client, without Webpack?

1 Answers1