Skip to content
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

babel-standalone not transpilling esm module #9976

Open
liudonghua123 opened this issue May 14, 2019 · 5 comments

Comments

Projects
None yet
3 participants
@liudonghua123
Copy link

commented May 14, 2019

Bug Report

Current Behavior

I want to write vue demo for education teaching purpose, in order to focus only the vue part, I don't want to introduce npm, bundler like webpack or browserify and so on.

So I write code using babel-standalone. I also want to use vue-class-component. But now I could not use the esm build of vue and vue-class-component, in short I want to support write code like this in my main.js

import Vue from '../vender/vue.esm.browser';
import Component from '../vender/vue-class-component.esm';

@Component
class App extends Vue {
//......
}

If I wrote the code like above, I got Uncaught ReferenceError: require is not defined eror.

Expected behavior/code

The demo code could run correctly.

Babel Configuration (.babelrc, package.json, cli command)

none

Environment

  • Babel version(s): babel-standalone@6
  • Node/npm version: none
  • OS: Windows 10
  • Monorepo: no
  • How you are using Babel: online

Possible Solution

Provide require-runtime.js like regenerator-runtime.js

Additional context/Screenshots

Now I can make it work using the following style, but using Component part of vue-class-component is ugly.

  <!-- the html contain these scripts -->
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-class-component@7.1.0/dist/vue-class-component.js"></script>
  <script src="vender/babel.min.js"></script>
  <!-- fix regenerator not defined -->
  <script src="vender/regenerator-runtime.js"></script>
  <script src="js/main.js"
    data-plugins="transform-runtime,transform-class-properties,transform-decorators-legacy,transform-regenerator"
    data-presets="es2015,stage-1" type="text/babel">
  </script>
// js/main.js
const Component = VueClassComponent.default;

@Component
class App extends Vue {
//......
}

more details can found on https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented May 14, 2019

Hey @liudonghua123! 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

commented May 14, 2019

The es2015 preset transpiles modules to commonjs. You can either remove that preset and include only the plugins you want, so that you can transform modules to amd.
Another option is to manually call Babel and pass the "modules": "amd" option to that preset.

@liudonghua123

This comment has been minimized.

Copy link
Author

commented May 14, 2019

@nicolo-ribaudo Hi, I tried to remove that preset, then I got Unexpected token(complete data-presets) or Expected type "Expression" with option {} on this line ...this.commonFetchOptions(remove es2015 only) , after I rewrite this code, I got Uncaught ReferenceError: require is not defined again.

btw, how can I pass "modules": "amd" to <script src="js/main.js" data-plugins="transform-class-properties,transform-decorators-legacy,transform-regenerator" type="text/babel">?

@liudonghua123

This comment has been minimized.

Copy link
Author

commented May 14, 2019

I tried using data-presets="['es2015':{'modules':'amd'}],stage-1" or data-presets="[es2015:{modules:'amd'}],stage-1", but neither works.

It seems have something in common with #8831.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented May 14, 2019

You can provide custom options like this:
https://jsfiddle.net/0n8w6zh9/

Note that you'll need to import amd-compatible modules, since Babel only transpiles <script> tags (and not scripts loaded by other systems).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.