I just started trying ES6 and i already got stuck with ES6 modules. I use babeljs for translating ES6 into ES5. My understanding is, that babel uses requirejs module loader behind the scenes to make the import happen.
So i am trying to set up a very basic sample of module loading but i cannot get it working.
I want to import a module from bar.js into index.html. Those files have same parent directory.
index.html code:
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/babel-standalone#6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body>
<script type="text/babel">
console.log("Here we go.");
import {foo} from 'bar';
console.log(typeof foo);
</script>
</body>
</html>
bar.js code:
export function foo() {
console.log("Foo it!");
}
I get following error:
Uncaught Error: Module name "bar" has not been loaded yet for context:
_. Use require([])
Even more interesting thing happens when i change order of require.min.js and babel.min.js in the <head>. This time the text/babel script is not executed at all (no errors in console).
Could somebody, please, explain what is wrong? Or is this completely bad approach?
Please, do not suggest using bundlers like webpack. I dont want to use them yet.
Related
Rationale
I'm making a small website using svelte and sveltekit, and a library (roslibjs) that seems to be only usable within <head>.
It worked only in those 2 types of scenarios for me:
put everything in <head> and output to the console
import the library in <head>, but only by using <script src='https link here'></script>.
Everything else goes into onMount, outside of <head>.
1 is not acceptable, and while 2 is a temporary fix, I really don't want to rely on external links. (the site might be used in an offline environment)
What I tried
Since if I have all the code relying on the library inside <head> it works just fine, I tried to do so. But so long I couldn't find a way to export variables from <head>.
Example:
<svelte:head>
<script>
let a = 10
</script>
</svelte:head>
<p>{a}</p>
This throws an error saying 'a' is not defined.
Change the import line to <script src="node_modules/roslib/build/roslib.js"></script>, directly from the node_modules folder.
While this works in npm run dev, it doesn't once after npm run build.
What I expect
To be able to use the library with svelte3, but by using it from npm, not an external link.
One way to tackle this might be to export variables from <head>, but I couldn't find a way to do so.
With the updates to THREE.js, I have been having trouble using the GLTFLoader. It keeps giving me the error mentioned above.
Imported in a seperate js file
test.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="test.js"></script>
file structure
The import statement cannot be used in embedded scripts unless the script has a type="module".
Here is an example for the import statement with type module.
<script type="module" src="test.js"></script>
I have a webpage with ES6 modules that I want to transpile with babel to ES5. Following the babel documentation on https://babeljs.io/docs/setup/#installation, I can successfully transpile the javascript folder with ./node_modules/.bin/babel js -d target but they don't transpile any HTML there. How can I transpile my index.html? Using it with the same syntax fails:
./node_modules/.bin/babel index.html -d index2.html
SyntaxError: index.html: Unexpected token (1:0)
> 1 | <!DOCTYPE html>
| ^
2 | <html>
3 |
4 | <head>
MWE
export default "Hello World";
<!DOCTYPE html>
<html>
<body>
<script type="module">
import message from "./js/message.js";
window.message = message;
</script>
<button onclick="alert(`Message: ${window.message}`);">Get Message</button>
</body>
</html>
I'm using babel 6.24.1 (babel-core 6.25.0) with npm 3.10.10. I know I don't need modules for this MWE, the real page is much more complex.
P.S.: I want to continue developing the untranspiled version to preserve my workflow. I want to use the transpiled code only for production.
You can't.
Babel is a JavaScript transpiler, it doesn't deal with HTML, or even JavaScript embedded in HTML.
Rewrite your HTML to use external JavaScript. Use addEventListener instead of intrinsic event handler attributes. Then apply Babel to the JS files.
Friends,
I'm trying to keep an external file out of the Webpack bundle, but to remain as a dependency - a settings file in this case. I've tried several variations of the following -
externals: {
'Settings': JSON.stringify(require('./settings.json'))
},
...but Webpack keeps including it in the bundle. The only examples I've found in the docs are of common presets like jQuery, nothing is mentioned of local but external files. Help? Thanks!
So after much research, the only way, as of writing this answer, to fetch an external file is to, in a way, ignore Webpack and simply add another script call to the index.html. This is what I ended up doing -
<body>
<div id="whatever-app-id"></div>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="app.js" defer></script>
</body>
For good measure, you can also add the webpack externals as mentioned in #gmaliar 's answer with reference to the global object declared in the settings.js file. However that's somewhat redundant as the object is global anyway.
Hope it helped anyone.
How about?
// Outside of webpack context
var fs = require("fs");
var settings = JSON.parse(fs.readFileSync('./settings.json', 'utf8'));
// Within webpack context
externals: {
'Settings': settings
}
I'm getting error with angular JS Error: [ng:areq] Argument 'MyController' is not a function, got undefined, when trying to use bundles. However when I explicity include the app in my html using script tags it works.
Bundle Config.cs
bundles.Add(new ScriptBundle("~/bundles/myweb")
.IncludeDirectory("~/Scripts/myweb", "*.js")
.IncludeDirectory("~/Scripts/myweb/Controllers", "*.js")
.Include("~/Scripts/myweb/Controllers/myController.js")
.Include("~/Scripts/myweb/myweb.js"));
With this HTML does not work:
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
This HTML does work but I'm unsure why I have to explicitly include myApp.js since it is already included in the bundle (and when I view the bundle from F12 - Developer Tools on Google Chrome it does already include the expected code):
<script src="~/Scripts/angular.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/myweb")
<script src="~/Scripts/myweb/myweb.js"></script>
Note the shown html is in the head of _Layout.cshtml. I'm using angularJS with MVC.
Just figured out how to fix this.
I basically need to include the following code
<script src="~/Scripts/angular.js"></script>
#Scripts.Render("~/bundles/myweb")
in both the _Layout.cshtml and the index.cshtml (I only had it in Index.cshtml)