I'm trying to build a firefox web-extension and I'd like to import another module (for code reuse) into the popup script. I've looked around and read that import might work, but eslint says its a reserved keyword.
I also read where someone recommended to import the second script straight onto the html page like so:
<script src="./js/utils/Listeners.js" type="module"></script>
<script src="./js/popup.js"></script>
I tried it just like this but didn't get anywhere. Also new to Javascript. Better at more traditionally OOP languages.
Is there a way to import a module into another using web-extensions?
I've been able to solve the problem using jQuery to load scripts/modules, though further testing might be required.
credit to this question on loading jQuery into a firefox webextension.
Related
Issue description
I would like to have Visual Studio Code to hint autocompletion and provide documentation for a JavaScript project which includes libraries a module in a separate HTML file.
Context
I am using P5JS. It assumes we include the P5JS library and our script via the <script src="…"> tag in an HTML file. Autocompletion and documentation work after installing the p5.vscode extension. So, no problem here.
I am also using ml-matrix, which I'm including in the HTML via the <script src="…"> tag. The library constructors and methods can be accessed via mlMatrix.. (I figured this by toying around in the console, and I wouldn't know otherwise how to find out I need to prepend mlMatrix. to all functions in the library.)
index.html
<head>
<!-- script src="…" P5JS libraries -->
<script src="./node_modules/ml-matrix/matrix.umd.js"></script>
</head>
<body>
<script src="./script.js"></script>
</body>
script.js
A = mlMatrix.Matrix.eye(3) // no autocompletion or docs, code runs
console.log(A)
Workaround
Adding import * as mlMatrix from "ml-matrix" to the beginning of script.js makes autocompletion and documentation work, but the overall project does not run. So, I have to comment and uncomment the first line every time I save and preview my edits on the browser.
script.js
import * as mlMatrix from "ml-matrix"
A = mlMatrix.Matrix.eye(3) // autocompletion and docs work, code doesn't run
console.log(A)
When loading the HTML, the browser complains with script.js:1 Uncaught SyntaxError: Cannot use import statement outside a module..
Desiderata
I'd like to be able to save and preview my project while having a working autocompletion and documentation hint from VSC.
Debugging
After reading a few sections of David Flanagan's «JavaScript: The Definitive Guide», I started figuring out what's going on. So, I'm reporting here my current understanding.
JavaScript, or rather ECMAScript, used to be a scripting language.
Scripts loaded with <script src="…"> are "global" scripts, living on the current page, injecting vars and functions in the global scope (or window object).
In order to support proper software engineering relying on modularity, modules were introduced in 2015, in ECMAScript 6, or ES6 in short. To import a module in an HTML document one can use <script type="module" src="…">.
Now, to import a module in a JS file, the file itself needs to be a module. So, dealing with an actual script myself, I cannot do such a thing.
Even by <script src="…"> a module, it won't inject itself in the main namespace. It will create a whatever name where it will store everything it exports. So, now we are at the point where we need to instruct the IDE that a module has been loaded on the HTML side with a specific name and it's used in a JS script.
So, we have now a more articulate question.
Issue re-statement
How to inform VSC that a module has been loaded through the HTML page?
I believe a probable answer will include some custom jsconfig.json to be created. Right now I have zero clues about how to do this.
Another solution would be using some specific ///<reference path="…"/> at the beginning of the JS file. Also for this I have no specific knowledge.
I know I'm a bit behind the times here, but how can I import from this library (uirouter/react-hybrid) for an existing Angularjs site using only tags to include libraries? I have tried a few things, including including from CDN via jsdelivr, also building from node locally and attempting to include the dependencies via webpack. I have also tried loading through require.js but not sure I did it correctly. No matter what, I either get an error for the import or I fail to see the library once imported. I am just not getting it, I feel like I'm missing something. Could someone please help me with a detailed process for how I can get this library to work in place of the existing angular ui-router loaded via tag?
I could definitely go into the reasons why I'm doing this in the first place if necessary, but I feel like this should be pretty simple and I'm just struggling.
Thanks.
I am learning javascript. I read about how to import and export things between javascript modules. I am making a javascript game which consists of several files. Each defines a class and its methods.
I have two questions:
Only one of the files actually contains code that interacts with the DOM, so in the HTML do i need to include <script src="..."></script> for every js file? or only the one that deals with the DOM?
I first tried only referencing the one js file in the index.html and exporting the classes defined in the other js files and importing them in the js files where those classes are used. But no browser seemed to understand the import/export statements? Isn't that done on client side javascript?
You need referencing all js file in the index.html, because your game will use other file as the module for entry file. And the module file need to be referenced before the entry file.
Yes, export/import can not be used on client side directly, its used in nodejs platform mostly with supporting by some tools like typescript or babel. But you can use them with some tools as told before.
so, i think you can use babel to transform your code to es5 target firstly, then that you can reference them in browser.
If you mean ES6 imports, the import Whatever from “some-resource”; statement requires the “some-statement” to be a URL.
Additionally, the “entry point” script should be <script type=“module” src=“some-url”></script>. The “module” is what tells the user agent that it is loading a JavaScript module and that import statements should be resolved.
You only need to include one <script> tag if that one script correctly imports the rest of your dependency chain.
Browser support for this is still somewhat limited which is why using webpack or some other build step is still recommended until the feature is fully fleshed out.
currently import / export syntax is supported by approximatively 75% of all users browser (caniuse.com).
The very first thing is to put type="module" as an attribute of a <script tag> (Eg. <script type="module">)
Then you can import/export in your modules. And YES modules need to export a value (variable, function...) to be able to use it in another script, but this is optionnal since you can just execute script without the need to export something.
Documentation:
import
export
Very good article on how to use module in browsers
Keep in mind that is not yet a supported feature and you will need a polyfill if you mind about browser compatibility
I've tried reading over the "guide" on their website, and none of it makes sense to me. I thought it'd be the same thing as JQuery, but apparently I'm missing something.
I have this appended in my html document (where it's appropriate of course):
<script src="respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="app.js"></script>
<script type="text/babel" src="app_2.js"></script>
As you might have guessed, I'm using Adobe Dreamweaver to develop my webpage.
That is what the first script element is for. The second being for JQuery.
After running an "example" for ReactJS with JSX, I found the three following script elements in the html document. That, to me, tells me that all I had to do in order to get it working is link those in as well.
Long story short: it didn't work. I tested it on Firefox and Chrome.
The thing I'm still scratching my head over is the error I receive when trying to view the remote files for the ReactJS-related files (on DW):
Not found: package "filename%version"
Where filename is the name of the JS file and version is the version (I'm assuming).
This only occurs for those files and not for JQuery. DW still let's me know that the file is remote and cannot be altered, but I get nothing for the other remote files.
What gives?
I was able to get it working after some scrambling, reading, and random attempts.
Turns out I was getting in my own way.
Because of the tutorial I was learning react from, I had assumed I was required to always create a react object and react-dom object.
After removing those two declarations from my js file, I was able to then see the expected results in my browser.
The only thing I can think of as to why those declarations would cause an issue is either because one of the files I import already does so (which has to happen as I don't declare the "React" or "React-dom" instances anymore but am still able to use them) or it is no longer required explicitly. The tutorial I went through was a bit dated.
I'm gonna have so much fun with this!
I'm using fetch-jsonp in my react app running ES6, and im unable to import the script with import fecthjsonp from 'fetch-jsonp';- if anyone knows what the problem is please care to explain.
The script seems to be imported but the console returns fetchjsonp undefined
However, this got me wondering - What is the best way to include a script like this? Using import or just drop a script tab in my HTML with the CDN?