exporting from yet-another-webpack-es6-starterkit - javascript

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.

Related

Node Js, Require is not defined in global folder

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

Duplicate Function Implementation

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".

Laravel 5 mix app.js file creation

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()

Typescript Command Line Compiler Error

I need to deploy an Ionic Project, where the Main Developer has left the company and there is no documentation whatso ever left. The problem I have is, that there are Typescript Files, but no Typescript Compiler defined or used in Gulp or anything.
So he probably used a local compiler to do this.
I installed the 1.5.3 Version of Typescript via npm. And my goal was to recursively compile all the files in one directory to one Javascript-File.
What I found online is, to use:
tsc *.ts --out app.js
However I always get the Error:
error TS6053: File '*.ts' not found.
When I compile a single File it works. And I tried it in different terminals.
EDIT: I need to add I have a map.js File of the target app.js. So I know what I need to compile. Is there a way or tool to reverse engineer using this map file?
EDIT2: Example of a File:
/// <reference path="./util.ts"/>
///
module al.driver {
/**
* local machine: false
* smartphone: true
*/
export let cordova = true;
export interface IPreLoadData {
date:Date;
id:String;
}
export var preLoadData: IPreLoadData = {
date:Date,
id:String
}
// event conditions
var docReady = false;
var devReady = false;
// Document ready listener
$(document).ready(function() {
console.info("document ready");
docReady = true;
bootstrapApplication();
});
// Initialize Application
function bootstrapApplication() {
if (docReady && devReady) {
angular.bootstrap(document, ["test"]);
}
}}

Why Javascript function coming undefiend after compiling from webpack?

Hi i have used webpack to load my different modules into one bundle.js file , different function from this files are coming undefined in html but if call the same in my entry file ther working or making winndow.fnName .
here is my code
Test.js
var test=function(msg){
console.log(msg)}
module.exports=test;
lib.js
var lib=function(msg){console.log(msg)}
module.exports=lib;
Entire JS
var lib=require('./lib.js');
var test=require('./test.js');
index.html
test("test called");
lib("lib also called");
In output file created by webpack your code for Entire JS will look something like this:
/*****/
/* 0 */
/*****/ function(module, exports, __webpack_require__) {
'use strict';
var lib = __webpack_require__(1); // require('./lib.js')
var test = __webpack_require__(2); // require('./test.js');
/*****/ },
And since your variables lib and test are defined in function they aren't assign to window object.
You can workaround to export your lib and test to window object (I made this assumption based on that you want to use this variables in html file), by doing this:
var lib = require('./lib.js');
var test = require('./test.js');
window.lib = lib;
window.test = test;

Categories