I am developing a web application in Laravel. Primarily, I had kept my js codes in public directory and everything was working. But later, I had planned to move them to the resources directory and minify them.
Now, the problem is the functionalities, those are getting triggered by the JQuery are running well. But the functions, I am calling from the blade template are getting failed as the js is minified.
Here, I need some solution without moving my JS codes to the public directory.
I had run NPM to minify the JS.
npm run prod
After this, the code is failing to call a function.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/validation.js', 'public/js');
Actually, I found the answer.
npm run prod actually references all method and variable declaration and calling functions with minimum characters to minify and optimize them.
When I am calling one function from HTML, that function calling name is not compiled in HTML, but changed in JS file, turning out to be not found.
I have moved my function call with DOM events to JS files to make them in the same stream
Related
I have a very old AngularJS project which is quite big. Instead of creating a bundled .js file composed of all the required code, this project is organized in the following way:
All the .js files are directly loaded in index.html with a <script src="path/to/js">
Even the dependencies minified .js files are loaded in the same way, examples:
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
The code makes vast use of definitions (functions, classes, enums and so on) declared in different .js files without importing them (because they are all available globally). Examples:
// inside one file, PastFuture is not declared here
if (self.pastFuture === PastFuture.FUTURE) {
... // do something
}
// inside another file, it is not exported or anything, it is just defined
const PastFuture = {
PAST: 'PAST',
FUTURE: 'FUTURE'
};
I want to migrate this project into something a bit more "standard". I've removed bower for npm dependencies but now I'm stuck at forcing all these .js files to get bundled together.
The major problem of the code is that once bundled with browserify, all the definitions not imported stops working, for example, PastFuture is not defined unless I import it manually wherever is required.
Is there a way to overcame / solve this problem without adding exports and require in all the files of the project?
I was thinking that if I concatenate all those .js files instead of trying to make them require each other, it would have the safe effect without the need to add exports and imports.. but as a solution, it just sounds like a hack to me and I was searching for something more correct.
A javascript file containing import statements referencing Firebase browser modules embedded in an HTML file needs to be declared as type="module". But after conversion to ES6 modules, this qualifier seems to be optional.
Is a "bundled" javascript file no longer regarded as a module? It certainly still behaves like a module, at least in the sense that a Javascript function in your bundled file remains unavailable to the DOM (eg, an "onclick" reference to a bundled function won't work).
Examples of tags in Google documents seem to confirm the pattern - scripts using browser modules should be declared type="module", bundled scripts should be left unqualified. But what exactly is going on here?
Advice would be much appreciated
Yes, before you build an app, i.e. before you do npm run build, remove type="module" from all the script tags.
What happens under the hood is that the bundler puts all the code from your .js files into one big file.
You can find that file inside you dist folder.
If you're using Webpack or Parcel or any other bundler, they convert JS from ES6+ to ES5, and ES5 does not support import statements, that is why it puts all the js code into one big file.
What I want to do is add a custom script in package.json file that should run always before start and build scripts.
Things I want to do in my custom script:
Copy the favicon.ico file from /favicons/${process.env.REACT_APP_BRAND}.ico into /public, in order to overwrite the default one
Do a symlink from /src/assets/${process.env.REACT_APP_BRAND} to /src/assets/brand, in order to import images inside code without doing things like dynamic imports (which works but I think it's not their purpose)
I'm a bit lost with the structure of this custom script, and programming languange (its shell, but I'm on MacOS, so, it's better do it in node?)
Thank you.
Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0
I am totally new to NodeJS and I wonder what's the difference between those two.
For example, in this project (https://github.com/fikriauliya/hipku), we have index.js and dist/hipku.js. They are similar except the last line:
module.exports = publicMethods; vs return publicMethods;
I guess dist/hipku.js is generated from index.js? How is it generated and why does it need to be generated?
Things in the dist folder are usually the product of building from index.js in this case. You'll notice it gets minified, and that folder would eventually be used on production sites. If you look at the package.json file, you'll notice that index.js is the main file, so if you're doing any edits, that would be the place to do so.
It depends on how you want to use this package, in browser or server side.
server side
index.js is the entry of NPM package. When you do require('hipku'), actually NodeJS locates the file module node_modules/hipku and run index.js ends up with the object adhere to module.exports
browser
Just load dist/hipku.js into your browser by <script>, it will register hipku into your global namespace, then you can use it's API.