We Keep Coding

How to add Javascript dependencies and CSS files in Laravel correctly

I am using Laravel 7 to build one of my application. I have the following Javascript dependencies.
Bootstrap
Data Tables
jQuery
Select 2
Toastr
D3
Now I am using the new laravel/ui package and has scaffolded a Bootstrap based application. It uses Laravel Mix and has compiled app.css and app.js file. The app.js has the following code:
require('./bootstrap');
The bootstrap file has following code :
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
I think in this file we need to add the other dependencies. In the documentation also it says to add the Javascript dependencies to here. I have a confusion on how to add DataTables and other above mentioned dependencies to the file. Which package names I need to use in the require ?
Also, most of these packages has their own CSS files too. How can I add the CSS files for all the dependencies in file like the bootstrap.js ? Currently all the CSS files are imported in the app layout blade template. If someone can add a tutorial link , that also will be great.

for install JavaScript Package on your laravel project you cad do this,
example Datatable :
Install npm package
npm install --save datatables.net-bs4
include it in Include it in resources/js/bootstrap.js
require('datatables.net-bs4');
Include in resources/sass/app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Run npm run dev in your terminal to compile the necessary files
last create a js file and include it on your bootstrap.js file and use package
<script>
$(document).ready(function () {
$('table').DataTable();
});
</script>
dont forget check your webpack.mix.js file
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
and include your compile js and css file in your template
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
i hope to help you and
sorry for bad my English

How to minify my personal jquery frontend microframework

I've made my personal jQuery microframework with useful utilities. It has a directory structure like this:
/jspocket
- jspocket.js
/scripts
- include.js
- navigation.js
- slider.js
- popups.js
...
Therefore it is imported into html like this:
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jspocket/jspocket.js"></script>
In jspocket.js is this code for importing all the .js files from '/script' directory into an html file:
$.getScript(jspocket_dir + "/scripts/navigation.js");
$.getScript(jspocket_dir + "/scripts/popups.js");
$.getScript(jspocket_dir + "/scripts/slider.js");
$.getScript(jspocket_dir + "/scripts/include.js");
...
Now I would like to create a minified version of my framework so there will be only one file jspocket.min.js. But the problem is that the commands like:
$.getScript(jspocket_dir + "/scripts/navigation.js");
will not work, simply becouse scripts/navigation.js does not exist in minified version, it should be all in one file.
So the question is how could I minify the framework into one file (without manually copying all the code into one file)? Should I change the way scripts are imported? Does the new import/export features of JS solve it somehow? How is this problem solved in general? I'm using node.js and npm, so maybe there could be a good packages for this?

You need to use a build system to minify the files into one file but leave jspocket.js out of the process.
There are many build systems out there like GruntJs , Webpack or Gulp
This following is how to do it in Gulp
// the plugins
var gulp = require('gulp')
var uglify = require("gulp-uglify");
var concat = require('gulp-concat');
// task
gulp.task('minify-js', function () {
gulp.src([
./jspocket/scripts/navigation.js,
// the rest of your files in your order
])
.pipe(concat('jspocket.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
then run gulp minify-js

How to require a built file using browserify?

Hello browserify lords :)
I built a js library using browserify. Working well in the browser and everything looks great if I put it as a separate file in my html:
<!-- my library -->
<script src="./library/index.js"></script>
<!-- my app that uses the library -->
<script src="./app/build.js"></script>
But when I want to require the library file in my app, browserify complains.
Because the requires are still in the file and if I re-bundle it, browserify wants to re-include the files that are already included.
My files:
- library
- src
- core.js
- foo.js
- build.js
- app
- src
- core.js
- build.js
library/src/foo.js:
module.exports = 'foo';
library/src/core.js:
console.log(require('./foo'));
app/src/core.js:
require('../../library/build');
library/build.js is created using browserify:
$ browserify library/src/core.js > library/build.js
Now I want to build app/src/core.js the same way ($ browserify app/src/core.js > app/build.js) but it complains: Error: Cannot find module './foo' from '/library'
I created a test repo to demo the issue: https://github.com/saeedseyfi/browserify-issue-1773
Please advise.

How to load other file(s) before Angular2 components

Is it possible to load a certain file before Angular 2 loads? At the moment I'm loading jQuery, bootstrap, file.js globally in angular-cli.json including it like this will bundle up when you start Angular.
Is it possible to load file.js first before Angular? I will also need to load jQuery for this file.js as it has some jQuery http requests. I tried moving ../node_modules/jQuery from angular-cli.json to my index.html.
Angular-cli.json - when file.js was in angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"./assets/js/file.js"
],
index.html - when I moved jQuery and file.js in index I get jQuery not defined.
// in head tag
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="./assets/js/config/env.js"></script>

On top of .ts file where you want to use jQuery($), Import following :
import $ from 'jquery';
Now you can use $ for jquery related things.

Include custom JavaScript in the app.js

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');