ES6: import module from URL
JavascriptEcmascript 6Es6 ModulesEs6 Module-LoaderJavascript Problem Overview
Is it possible to import javascript module from external url in ES6?
I tried (using babel-node):
import mymodule from 'http://...mysite.../myscript.js';
// Error: Cannot find module 'http://...mysite.../myscript.js'
Javascript Solutions
Solution 1 - Javascript
2018 Update: The module loader spec is now a part of the ES Spec - what you are describing is allowed and possible with <script type="module"> in browsers and with a custom --loader with Node.js as well as with Deno if you're into that.
The module loader spec and the import/export syntax are separate. So this is a property of the module loader (not a part of the ES spec). If you use a module loader that supports plugins like SystemJS.
Solution 2 - Javascript
You could also use scriptjs which in my case requires less configs.
var scriptjs = require('scriptjs');
scriptjs('https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.standalone.js', function() {
L.mapbox.accessToken = 'MyToken';
});
Solution 3 - Javascript
Update in 2022, it seems it works at least in latest Chrome, Firefox and Safari as of now, as long as the server provides a response header of content-type: application/javascript; charset=utf-8 for the js file.
Try these two files with a vanilla web server:
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script type="module" src="./hello.js"></script>
</head>
<body>
</body>
</html>
hello.js
import ip6 from 'https://cdn.jsdelivr.net/gh/elgs/ip6/ip6.js';
const el = document.createElement('h1');
const words = "::1";
const text = document.createTextNode(ip6.normalize(words));
el.appendChild(text);
document.body.appendChild(el);
This is a HUGE deal! Because we can say bye to Webpack now. I am a little too excited now!
Solution 4 - Javascript
TL;DR:
For now, no.
Long answer:
There are two different specs: the ES6 defines the syntax to exporting/importing. And there is the Loader Spec that actually defines how this modules will load.
Spec-speak aside, the important part for us developers is:
>The JavaScript Loader allows host environments, like Node.js and browsers, to fetch and load modules on demand. It provides a hookable pipeline, to allow front-end packaging solutions like Browserify, WebPack and jspm to hook into the loading process.
>
>This division provides a single format that developers can use in all JavaScript environments, and a separate loading mechanism for each environment. For example, a Node Loader would load its modules from the file system, using its own module lookup algorithm, while a Browser Loader would fetch modules and use browser-supplied packaging formats.
>
>(...)
>
>The primary goal is to make as much of this process as possible consistent between Node and Browser environments. For example, if a JavaScript program wants to translate .coffee files to JavaScript on the fly, the Loader defines a "translate" hook that can be used. This allows programs to participate in the loading process, even though some details (specifically, the process of getting a particular module from its host-defined storage) will be different between environments.
So we depend on the host environment (node, browser, babel, etc) to resolve/load the modules for us and provide hooks to the process.
Solution 5 - Javascript
The specification describes how exactly a module specifier in import is resolved:
https://html.spec.whatwg.org/multipage/webappapis.html#resolve-a-module-specifier
It says URLs are allowed, both absolute and relative ones (starting with /, ./, ../), and it does not differentiate between static and dynamic imports. Further in the text, there's an "Example" box showing examples of valid specifiers:
https://example.com/apples.mjshttp:example.com\pears.js (becomes http://example.com/pears.js as step 1 parses with no base URL)//example.com/bananas./strawberries.mjs.cgi../lychees/limes.jsxdata:text/javascript,export default 'grapes';blob:https://whatwg.org/d0360e2f-caee-469f-9a2f-87d5b0456f6f