Let's say I have folder scripts with 10 javascript files and instead of doing this:
<script src="scripts/js1.js"></script>
<script src="scripts/js2.js"></script>
<script src="scripts/js3.js"></script>
<script src="scripts/js4.js"></script>
<script src="scripts/js5.js"></script>
//and so on...
I want to do this:
<script src="scripts/*"></script>
which load ALL files in scripts
How would I go about doing this?
Won't be as easy as that, here is what you are looking for:
How can I include all JavaScript files in a directory via JavaScript file?
What you try to achieve is cumbersome from the client side. You can achieve the same through server-side scripting before you load your html file. You can use a task runner tool like grunt, gulp etc. (or write a script) that will traverse your target directory, retrieve all the *.js file paths and append their script tags in your html file.
Another solution is to use a tool to concatenate all your js files in one bundle file and only load that file from your html file. There are plenty of tools out there to do that
Related
I need to create a standalone HTML file (so no <script src="main.js"></script> tags.
I am using some node_modules and in development, writing it in separate files, but I want to be able to create a webpack.config.js that allows me to directly put the javascript into .html file. I know of HTMLWepackPlugin, but that only create a script tag that includes a source, not actually put the HTML in the file (even with inject: true).
Is there a workaround or another Wepack plugin?
Webpack: How to inject javascript into the HTML instead of separate JS file
Use html-webpack-inline-source-plugin, it is an extension plugin for the html-webpack-plugin functionality by adding the {inlineSource: 'regex string'} option.
Git plugin link
After I build my angular app, I have to perform one last manual step to get my program to run: The platform it runs on has a requirement that its javascript file is in the <head> of the html file that is running. Their .js is on a CDN. So basically, post-build, I have to open up index.html and add the following:
<script src="https://cdn.fragilecorp.com/lib/js/platform.js" type="text/javascript"></script>
Is there a way I can accomplish this automatically using angular configs or a different way?
Yes, in .angular-cli.json (.angular.json in older versions), I believe you can add what's inside of src to the scripts array.
Check this out:
How to include external JS file to angular5?
I am new to Nodejs and having trouble when trying to export my js code which exists in HTML files to more js files for less redundancy in code (same js code in two HTML files):
I exported the js code from both HTML files to js a file (js_code_file.js for example) and tried using <script src="js_code_file.js" type="text/javascript"></script> in the header of the HTML file in order to import the file, and it did not work.
Is it because of Nodejs? and if it is - is there a way to "require" these files somehow?
<script src="js_code_file.js" type="text/javascript"></script>
Looking at the src attribute, js_code_file.js has to be in the same path as the .html file referencing it; that is, it has to literally be in the same folder. So make sure that is the case, otherwise, update your question with any errors you might be receiving.
I have an AngularJS project and I want Webpack to handle the build process for me, I need Webpack to output JS files dynamically from the src folder into my HTML template, and output them like this:
<script src="source1.js"></script>
<script src="source2.js"></script>
<script src="source3.js"></script>
...
Is it possible to load files in specific order rather than getting them all in one big file?
I meet a problem when using pdf.js to view pdf. The problem comes from the
PDFJS.workerSrc setting. Is that possible to include the pdf.worker.js in
header, like
<script type="text/javascript" src="./../jsfiles/pdf.worker.js"></script>
and not using
PDFJS.workerSrc = './../jsfiles/pdf.worker.js';
is that possible for that? Thanks a lot.
From the documentation:
In order to bundle all src/ files into two production scripts and build the generic viewer, run:
$ gulp generic
This will generate pdf.js and pdf.worker.js in the build/generic/build/ directory. Both scripts are needed but only pdf.js needs to be included since pdf.worker.js will be loaded by pdf.js. The PDF.js files are large and should be minified for production.
This means that you only need to add the following code:
<script type="text/javascript" src="pdf.js"></script>
Remember that all files generated should located in the same directory as pdf.js