I created a custom JavaScript file with a simple function:
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. npm compiled my script and the picture function was included in the app.js file. Now I'd like to use the "picture" function in a blade.php but whenever I call it I get "Uncaught ReferenceError: picture is not defined". I checked the page source and found that the picture function is wrapped with a different function
(function(module, exports) {
function picture(soemthing) {
document.getElementById('idXYZ').src = "example.com";
}
})
Should I add some additional namespace before calling the picture function from blade.php or I have something wrong with mix configuration?
The functions and classes are not exposed to the public, so all JavaScript logic should be written in the JS files.
If you insist on writing JavaScript logic in the blade file, you could attach the function to the window object.
window.picture = function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
...
window.picture()
Related
I have a node.js server to create a web chat application. But I have a problem. In one file, I want to get a function from another file with the require method and module.export. In my first file (server.js, which is in the root path), the require method works, but in the /js folder (which is not in the root), it does not work. I installed npm and all packages globally.
My All File :
Code in chat.js:
const {verifUserConnected, getUserInfo} = require('express');
console.log(verifUserConnected)
Code in connect.js :
function verifUserConnected(){
return isConnected;
}
function getUserInfo(){
return null;
}
module.exports = {
verifUserConnected,
getUserInfo
};
In "Server.js" The require method works
You've put connect.js in underneath a folder named "public" which implies you are serving it to the browser and trying to run it client-side.
Browsers do not have native support for CommonJS modules (i.e. module.exports and require).
Your starting options are:
Rewrite the client-side code to not use modules
Rewrite the client-side code to use JavaScript modules (i.e. using import, export and <script type="module").
Transpile the modules for use on the browser (e.g. using a tool like Webpack or Parcel.js
However … chat.js attempts to require('express'). Express will not run in the browser and doesn't export anything named verifUserConnected either. You'll need to address that too.
In Common JS (Node JS works by default eith Common JS)
const startServer = () => {
// Code
};
module.exports = { startServer }
//Or
exports.startServer = startServer;
To import.
const { startServer } = require("./path");
If you have any question ask me
I have one file, app.ts under my scripts folder, that gets copied to wwwroot/scripts by a gulp task. After the gulp task runs, I now also have a wwwroot/scripts/app.ts file, in which the sole function is red-underlined as duplicate. Is this normal, or is my gulp task, below, declared incorrectly?
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"]
};
gulp.task("default", function() {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
});
I see the raw app.ts file, from the root scripts folder also gets built into *.js and *.js.map files. Could this have something to do with the 'false positive' duplicate function?
Don't copy the .ts files. You only need the compiled .js files in the scripts directory (unless you are doing something unusual with TypeScript source from there).
Then in your tsconfig.json file, add an exclude directive to exclude wwwroot/scripts/**/* in your IDE.
//VSCODE
This is an issue from VSCode. To fix it execute the following command
tsc --init
//to initialize the tsconfig.json in the folder.
//VISUAL STUDIO
In order to prevent functions to be in global scope, you can add export {}; on top (or just export this function):
// 1.ts
export {};
function test(){
console log("File 1 Error");
}
// 2.ts
export {};
function test(){
console.log("File 2 Error");
}
1- When you call glup with 2 references to the same code the .ts and .js he is going to transpila .. the .ts in to .js soo that's why you have 2 files.
You can try this:
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.map"]
};
gulp.task("default", function() {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
});
You need to generate a tsconfig.json file. You can generate the file using a simple command. Open terminal and type "tsc -init".
I'm using 'yet-another-webpack-es6-starterkit' as my build kit. Unmodified, no changed package.json settings.
The code works well on its own but I need to export a function in the main index.js file so the function can be used by other js files in a node environment.
This is the example code I used for how to export:
In Node.js, how do I "include" functions from my other files?
I created a test function called 'test' in the index.js.
module.exports = {
test: function () {
var r = 42;
return r;
}
};
But the external file cannot find the function. It doesn't seem to be visible from outside the js file.
I am working on minification of 3(one.js,two.js,three.js) JS files using require.js. The 3 js files have 3 alert messages. These 3 js files is being called using main.js file.
One.js:
define([], function one() {
alert("one");
});
Two.js:
define([], function two() {
alert("two");
});
Three.js:
define([], function three() {
alert("three");
});
Main.js:
require(["./scripts/one", "./scripts/two", "./scripts/three"], function (one, two, three) {
});
Main_built.js:
define("app/scripts/one",[],function(){alert("one")}),define("app/scripts/two",[],function(){alert("two")}),define("app/scripts/three",[],function(){alert("three")}),require([],function(e,t,n){}),define("app/main",function(){});
Later I created Main_built.js and trying to use it and expecting that no http calls should be made to one,two and three js files, but still I am seeing calls to them in the Fiddler tool.
On running my application, although the Main_built.js is loaded with minified contents of all other js file.
The thing that I am expecting is on executing the application, it should only load the Main_built.js, and should not call any other js files. But i can see it is calling one.js, two.js etc along with Main_built.js
Below is the link I have taken reference from-
http://requirejs.org/docs/optimization.html
How can I set the scope of the defined variables for JSHint to my whole project in WebStorm?
If I have multiple files and imports like jquery or Backbone I don't need to see the error JSHint: 'Backbone' is not defined.(W117). This is not only form my imported libraries, but also for my own external files.
Some suggestions is that I should disable undefined errors, but this is the functionality that I want to use.
I.E.
In my main.js I have this:
function Main(){
// Some epic code
}
Main.prototype.theBestFunctionEver = function(awesome, stuff){
return awesome + stuff;
}
and in foo.js I have this:
function init(){
var main = new Main(); // Shows that Main is undefined
var wrongVar = 6 + unInited // This should always give me an error
// Rest of init
}
JSHint works on per-file basis and doesn't 'see' variables defined in other files unless they are added to 'global' list. This can be done by either adding the corresponding comments ('/* global MY_LIB*/ - see http://www.jshint.com/docs/) in code, or by adding variables/functions you'd like to use globally to the 'Predefined' list in Preferences -> Javascript -> Code Quality Tool -> JSHint -> Predefined (,separated).