2

I want to use Babel, to be able to support some IE browsers in my web-application. I previously used Node and some cdn's in my project, but replaced it with local min.js files, and i want to keep it this way if possible.

So far i have downloaded the babel.min.js, and replaced this:

<script src="./src/index.js"></script>

With this:

<script src="./src/index.js" type="text/babel"></script>

This threw CORS errors in Chrome and Firefox, and it's still just showing a blank page in IE. When testing i'm just running the files locally, so this might not be an issue when deploying to the server, but that's not possible right now.

I was reading a bit about the config files, and the closest i got was that i might need to create a .babelrc file. But the documentation keeps mentioning using NPM and the package.json file, which i want to avoid.

So right now i can't seem to figure out if what i'm trying to achieve is even possible. If possible, i'm uncertain as to how to tell Babel which file to transpile.

The errors thrown are:

Access to XMLHttpRequest at 'file:///C:/src/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

and

GET file:///C://src/index.js net::ERR_FAILED Blockquote

George Lords of Castle
  • 899
  • 2
  • 9
  • 18
Anders Jensen
  • 330
  • 3
  • 20
  • 1
    "But the documentation keeps mentioning using NPM and the package.json file, which i want to avoid." — Why? It is the best way to use Babel. – Quentin Aug 14 '19 at 09:06
  • "This threw CORS errors in Chrome and Firefox" — What CORS errors? Be specific! – Quentin Aug 14 '19 at 09:06
  • @Quentin it might be, but i have specifically been asked to avoid Node for this project. I have updated the post with the errors. – Anders Jensen Aug 14 '19 at 09:09
  • Duplicate: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Quentin Aug 14 '19 at 09:10
  • "Don't use Node" is a requirement you should challenge - it's a build tool, not something that needs deploying in production. Running Babel client-side imposes a performance penalty. – Quentin Aug 14 '19 at 09:10
  • Is "Don't use node" a requirement about the server for whatever you are building, or a requirement about build tooling in general? I can understand not using it as a server, but it's a general tool for JS development at this point. Avoiding it for build tooling is essentially ignoring a decade of progress in the JS world. – loganfsmyth Aug 14 '19 at 14:47
  • @loganfsmyth server requirement, so i guess i figured it was easier to just avoid it all together. But like i mentioned in another comment, it might come down to my understanding of how Babel works, that's the issue. And maybe even my understanding of Node. – Anders Jensen Aug 14 '19 at 14:50
  • Node is just a means to run a program, just like `python` or anything else. You can run JS applications and build tooling and then use the result of that build with your non-Node server and run that code client-side. Node would only come into play when code needs to be changed. – loganfsmyth Aug 14 '19 at 16:29

2 Answers2

1

So as I understand you want to use Babel purely in the browser? Maybe @babel/standalone is the package you're looking for?

https://babeljs.io/docs/en/babel-standalone

I'm guessing you have your own good reasons for wanting to do it this way, but just in case a word of caution: Babel is first and foremost designed to be used to process your code on the command line before you deploy it to a webserver.

Jed Richards
  • 12,244
  • 3
  • 24
  • 35
  • They are using that already. The question says "So far i have downloaded the babel.min.js". The instructions you link to say "Load babel.js or babel.min.js in your environment". The problem is this one: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Quentin Aug 14 '19 at 09:18
  • It actually is the @babel/standalone i have been trying to use (sorry for not being clear about this). But i'm starting to wonder if it's the usage of Babel i haven't undestood quite right. Thanks for your input. – Anders Jensen Aug 14 '19 at 09:19
1

Running it all through a local server seemed to fix it, and made Babel work. So i guess it is possible, and i didn't need to create a config file.

For anyone curious as to how i did it, i used this guide: How do you set up a local testing server?

I will off course need to test if the performance can handle transpiling it on the go. Otherwise i will have to transpile it before deploying it to the webserver, like Jed mentioned.

Anders Jensen
  • 330
  • 3
  • 20