I want to include a custom JavaScript in the app.js file which as the following code:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
The require only works for published packages and using node install but I want to know if there is a way to include a custom js in this file in order to have just one built script in my app (in this case the app.js script).
Add your scripts under this path \resources\assets\js\,
(ex : \resources\assets\js\scripts\my_script.js & \resources\assets\js\another_script.js)
And, add them to \resources\assets\js\app.js
require ('./scripts/my_script.js');
require ('./another_script.js');
Just add your script in resources/assets/js and then run gulp to compile all your scripts into app.js
Check this for more info
I presume you have other files that are not exactly VueJs files and you want to build into a single script. In that case it is not good to put the script in that file. You can however place the files in your resources/assets/js folder and add some code to your gulpfile.js to build all your scripts into one file. Here is the code you might need to add.
mix.scripts([
'filename.js',
]);
By default, the build file will be placed in public/js/all.js.
You can customise that driectory by modifying the example above to something like this
mix.scripts([
'filename.js
], 'path/to/file.js');
Related
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
I'm using NG Boilerplate to create an angularJs application and I'm running into an issue where the JS file containing my login controller gets written to index.html before the loginModule.js file does and this is causing a bunch of errors.
Is there a way to control the order in which JS (and CSS) files get added to the compiled page?
Had this problem too.
The JS files are added alphabetically per module to your index.html. I solved this problem by defining submodules in files that start with an underscore (like _submodule.js) to ensure that it gets added to index.html before the other files that use this module.
More info here: https://github.com/ngbp/ngbp/issues/152
From this thread:
[...] I needed a solution for multi-file modules and came up with something that seems to be working. In a multi-file module folder, I create an _init.js which declares the module:
angular.module( 'ngBoilerplate.about', [
'ui.state',
'placeholders',
'ui.bootstrap'
])
;
And then my other .js files can do this:
angular.module('ngBoilerplate.about')
.controller ...
;