I hope this is clear, I need to import a JS file in HTML file. So I'm using src attribute like this :
<script src="my/js/file/1.js">
<!-- Some JS script here -->
</script>
But there is a thing... In my JS file, line 1, there is a require("another/file.js")... So I got an error in my browser console : require is not defined. How to solve it ?
EDIT
I'll try to be more clear :
I got 3 files, 1 HTML & 2 JS
The script tag above is in my html file.
In the src file, I need to import a 2nd JS file with require("my/js/file/2.js"
And it's working if i'm not using src attribute
But I got a error msg in console when I add src attribute
require is a built-in function provided by JS environments that support a couple of different kinds of modules, so how you load your JS file into a browser depends on what type of module system it is written to use.
The most likely cases are:
It is is a AMD module (very unlikely in 2021) in which case you can probably load it with RequireJS
It is a CommonJS module that depends on Node.js-specific APIs (in which case it can't run in a browser and to interact with it in a browser you would need to build it into a web service and make HTTP requests to it (e.g. via Ajax)). Some things that depend on Node.js-specific APIs include:
Making HTTP requests to sites which don't grant permission for browser JS to access them using CORS
Non-HTTP network requests (like direct access to a MySQL database)
Reading (or doing anything with) files from a file path expressed as a string (as opposed to reading files from a <input type="file">)
Spawning other processes
It is a CommonJS module that doesn't depend on Node.js-specific APIs and you can convert it to run in a browser using a bundler tool such as Webpack or Parcel.
Find out which of those options it is before you start trying to implement one of these solutions (all of which will take some time and effort that you don't want to waste).
Reading the documentation for a module will usually tell you. If you get it from NPM and it doesn't mention being browser compatible then it is probably Node.js only.
This might be because require() is not part of the standard JavaScript API. Your code might be using Nodejs, which is where require() might be used. Also, for you to choose an src file, you might also want to include the type which is <script type="text/javascript">.
Related
I'd like to make requests to the twinword text classification api, however I can see that it's designed to be used with unirest in node.js. Would it be possible to do this inside a chrome extension? If so, how might I go about doing it? I'm pretty inexperienced when it comes to API calls - if there are any examples of chrome extensions which have done something similar, I'd love to take a look.
Thanks for any help!
You cant use node modules in chrome extension directly because your script file must be a single .js without any import or require but there is a way.
you can use webpack to generate a single js file of your code
webpack looks to your code and when sees a require goes to the file and puts the code in a js file i have a template for chrome extension in my github :
Chrome-Extension-Template
Using JavaScript ES6 modules requires specifying a mime type in html like:
<script src="./js/graphics.js" crossorigin type="module"></script>
This will only load if a CORS header is added as a message header, which can only be added by a server, depending on server settings.
Am I correct to assume that this means that it is impossible to have a webpage which will still work offline while using ES6 modules ?
So designing an offline first app is impossible using ES6 modules ?
If you want to make a really offline-first app, is a good idea to make one bundle with all your ES6 modules. For example, you can choose Webpack as your module bundler.
After the compilation, you will receive one .js file which you can include in your page and do not think about CORS.
It's is also helpful if you want to reduce page loading time, because every time you use tag, the browser makes a request to the server, so using only one bundle will reduce requests.
Not an unsolved problem, but rather a technical question, which I hope is valuable enough to ask.
As a beginner web developer, I attempted to give a variable from a .js file to an .html file, to display a variable from the former on-screen - I desired to do so by the <script src=... parameter. The .js file I wanted to include in the .html is the one that contains the code, which creates the HTTP server (as of yet a simple one) and loads the .html file.
I was told that it is a bad idea, and I should use JSON objects instead. THe problem is therefore solved, but I'm interested: why was it a bad idea to include the script of Express.js within the HTML file?
Express.js is Node.js web application framework. Lets simply call it backend javascript, which means it's designed to be run not in browser, but as part of Node.js application.
Just FYI:
There is a way to 'run' some Node modules in browser. There is tool called browserify .
Here what they are saying on their web site:
Use many of the tens of thousands of modules on NPM in the browser
I'm afraid that Express.js is not one of those 'many' modules.
I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.
I am working on a strategy for storing and deploying JavaScript files on Azure (ASP.NET web role)
My requirements are:
To use minified versions in production
Use original versions (i.e. not minified) local versions in development environment (to simplify debugging)
Simple build/deployment process (VS2010)
Simple update process (my files will change from time-to-time)
There is a great discussion here Visual Studio 2010: Publish minified javascript files instead of the original ones however this does not take into account the benefits Azure can offer or working with multiple instances.
I am considering deploying my minified JavaScript files to blob storage and use these in the production version. These will be stored with a large max-age Cache Control for client side caching and filenames will store the version (so I can easily update). I welcome feedback on this strategy.
Thus, in development the rendered HTML would refer to a local script file, i.e.:
<script src="Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>
But in Production the result should use the following to refer to a minified version.
<script src="http://myblob.blob.core.windows.net/Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>
My main question though is how to best to achieve automatic switching of the paths in development and production. Or would a custom handler be the normal route (and if so how would that work – I don’t want each instance to reload from the blob on each request).
Regarding #1 & 2:
I discuss a strategy for this here. The basic idea is to user a helper function to emit the script tag. The function can construct a link to the debug files when in debug mode, and the minified files otherwise (which also makes it easy to test locally with the minified files). The same function can handle adding a version to the path for cache invalidation, etc.
Regarding #3:
Add the minification as an after-build step. I added this to my csproj (which is just an msbuild file), which use yui-compressor:
<Target Name="AfterBuild" Condition="'$(Configuration)' != 'Debug'">
<!-- remove previous minified files -->
<Exec Command="del $(ProjectDir)Styles\*-min.css" />
<Exec Command="del $(ProjectDir)Scripts\*-min.js" />
<!-- Minify javascript and css, unless we're in Debug -->
<Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .css$:-min.css --charset utf-8 $(ProjectDir)Styles\*.css" />
<Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .js$:-min.js --charset utf-8 $(ProjectDir)Scripts\*.js" />
</Target>
This will create minified *-min.js and *-min.css files in ~\Scripts and ~\Styles, respectively.
Warning B/c of a bug in version 2.4.6 of the yui compressor, the above won't work if there is only one .css or .js file in the directory.
Your basic plan sounds good. It will even enable you to make use of the CDN with very little effort (you just need to replace the path to your storage account with the path to the CDN).
I don't think I'd try to over think this too much. As suggested elsewhere a control is a good way to go. Simply have this control look up a web.config setting to get the root directory for your scripts and prepend it to the path of the script (your local version this setting would be empty). In order to make sure that you don't have to mess around changing the config for every deploy, I'd use config transformations so it just happens automatically.
For switching the URL of the script links dynamically when running from Azure, you should put all the script blocks inside a usercontrol and use that usercontrol in all the pages. You should not put the script links directly on the aspx/master pages, instead put then on ascx and use the ascx. This helps keeping common script links in a single file and when you need to make a sitewide change, you just change the ascx.
Another approach is to use my httphandler that changes the URL of the scripts from relative to absolute in order to facilitate download of scripts from different domain than the site is running from. You can of course use it to prepend the absolute URL of your Azure site.
http://omaralzabir.com/loading_static_content_in_asp_net_pages_from_different_domain_for_faster_parallel_download/
You may want to check out the Windows Azure CDN helpers project. It should do pretty much everything you are asking for. You can set in the config if you want your minified files to automatically be deployed to blob storage or stay on the web roles.
http://cdnhelpers.codeplex.com/
http://ntotten.com/2011/06/windows-azure-cdn-helpers/
http://nuget.org/List/Packages/CdnHelpers.Razor
http://nuget.org/List/Packages/CdnHelpers.ASPX