We Keep Coding

Javascript: Problem of javascript file import in yarn build

I have two JavaScript codes.
I would like to import and use another one from one javaScript code.
I tried a few things to import, but there was an error.
This is my main code(main.js):
import * as test from "./noise";
const audioContext = new AudioContext({sampleRate: 48000});
const destination = audioContext.createMediaStreamDestination();
await NoiseNode.register(audioContext)
And, This is the code that I want to import(noise.js):
window.NoiseNode = (window.AudioWorkletNode || (window.AudioWorkletNode = window.webkitAudioWorkletNode)) &&
class extends AudioWorkletNode {
static async register(a) {
k = await h;
await a.audioWorklet.addModule(g + "other.js");
}}
If i try to import as below,
import * as test from "./noise;
These errors occur:
Line 141:15: 'NoiseNode' is not defined no-undef
and then, If i try to import as below,
import * as NoiseNode from "./noise";
These errors occur:
Attempted import error: 'register' is not exported from './noise' (imported as 'NoiseNode').
How can I get everything at once?
Please give me some advice.
Thank you.

You have to export NoiseNode before importing it.
export window.NoiseNode = (window.AudioWorkletNode || (window.AudioWorkletNode = window.webkitAudioWorkletNode)) &&
after exporting, you may import it using the following code:
import * as NoiseNode from "./noise";

Importing All Modules in a file and Use them

I have a lot of modules in my project and I want to import them in a single file. I will transfer the Modules.js file to other files. Example:
modules.js :
const react = require("react")
const reactDOM = require("react-native")
const babel = require("babel")
const jquery = require("./jquery.min.js")
app.js:
const modules = require("./modules.js")
reactDOM.render(<h1>Hello,World</h1>,parentElem)

I found what I want. And now I remember I should answer my own question.
my modules file :
function loadmodule(src) {
elem = document.createElement("script")
elem.src = src
document.head.appendChild(elem)
}
loadmodule(<jquery-file>)
my file :
import {} from "modules.js"
console.log($) //is jquery loaded it returns an object

Node.js require multiple files in the same folder

I'm building a discord bot with node.js for my server and I have a bunch of commands for the bot. Each command is in a different file so I have a lot of const cmd = require("../commands/cmd.js");
const kick = require("../commands/kick");
const info = require("../commands/info");
const cooldown = require("../commands/cooldown");
const help = require("../commands/help");
Is there a simpler way to do this?

Inside folder commands put a file called index.js.
Each time you implement new commands in new file, require that file in index.js and then add it to the exports of it. For example index.js would be:
const kick = require('./kick');
const info = require('./info');
module.exports = {
kick: kick,
info: info
}
And then from any folder you can require multiple commands in one line like this:
const { kick, info } = require('../commands');

Export an object from one file instead?
const kick = require("../commands/kick");
const info = require("../commands/info");
const cooldown = require("../commands/cooldown");
const help = require("../commands/help");
const commands = {
kick,
info,
...
}
module.exports = commands;
And then:
const commands = require('mycommands')
commands.kick()

Create index.js file inside the command folder and then you can export an object like this.
const kick = require("../commands/kick");
const info = require("../commands/info");
const cooldown = require("../commands/cooldown");
const help = require("../commands/help");
const command = {
kick,
info,
cooldown,
help
};
module.exports = command;
You can import and use it like this:
const {kick, info} = require('./commands');

Electron: Load a file with `executeJavaScript`

I need to inject an NPM package into a BrowserView by using executeJavaScript. The package is Web3 and here is what I've tried so far.
import Web3 from 'web3'
const web3 = '' + Web3; // stringify the Web3 class
view.webContents.executeJavaScript(`
const provider = // ... provider got injected successfully because it doesn't have dependencies.
const web3 = new ${web3}(provider);
`)
But this throws the following error.
Uncaught ReferenceError: core is not defined
at new Web3 (<anonymous>:45:5)
at <anonymous>:41:16
Web3 is trying to load its core dependency which unfortunately did not get stringified.
So my question is, how can I load this whole package into the BrowserView? Aka how can you load npm package in the browser, if you do not have control over <script /> tags (at least I wouldn't know how to inject those in Electron)?
Update:
Because of what OJ Kwon suggested in the comments, I tried bundling Web3 with Browserify by running
browserify packages/web3/src/index.js -o web3-bundle.js
. It seemed to have worked, because at the very end of the bundled file (web3-bundle.js) it says:
// ... 50k+ lines long file
var version = require('../package.json').version;
var core = require('web3-core');
var Eth = require('web3-eth');
var Net = require('web3-net');
var Personal = require('web3-eth-personal');
var Shh = require('web3-shh');
var Bzz = require('web3-bzz');
var utils = require('web3-utils');
var Web3 = function Web3() {
var _this = this;
// sets _requestmanager etc
core.packageInit(this, arguments);
this.version = version;
this.utils = utils;
this.eth = new Eth(this);
this.shh = new Shh(this);
this.bzz = new Bzz(this);
// overwrite package setProvider
var setProvider = this.setProvider;
this.setProvider = function (provider, net) {
setProvider.apply(_this, arguments);
this.eth.setProvider(provider, net);
this.shh.setProvider(provider, net);
this.bzz.setProvider(provider);
return true;
};
};
Web3.version = version;
Web3.utils = utils;
Web3.modules = {
Eth: Eth,
Net: Net,
Personal: Personal,
Shh: Shh,
Bzz: Bzz
};
core.addProviders(Web3);
module.exports = Web3;
Now, I'm trying to import and include it like this:
const Web3 = require('./web3-bundle.js');
which doesn't work. It says undefined is not a constructor.
const Web3 = require('./web3-bundle.js').Web3;
and
const Web3 = require('./web3-bundle.js').default;
both didn't work, either. How should one do this?
Update 2:
Inspecting the bundle further, it has uses exports. and module.exports =. My editor only suggests methods and objects exported with exports. as importable 🤔

I suggest you to use this boilerplate or a boilerplate including a good webpack configuration (suggested boilerplate).
Follow these steps:
Clone the repository
Run yarn install
Run yarn add web3
Add import Web3 from 'web3'; into the app/containers/HomePage.js file (react render view).
Enjoy

DOTENV not reading variables properly

This is my file:
postgresU="myuser"
postgresP="mypass"
postgresH="myhost"
postgresDB="mydb"
postgresC="postgres://${postgresU}:{$postgresP}#{$postgresH}:5432/${postgresDB}"
In my nodejs app,
require('dotenv').config();
var connectionString = process.env.postgresC;
console.log("Connection String:",connectionString);
This prints:
Connection String: "postgres://${postgresU}:${postgresP}#${postgresH}:5432/${postgresDB}"
What am I doing wrong?

You can use a package like dotenv-expand if you want to expand variables in .evn files.
Once installed (with npm or yarn) you can simply use a .env file with:
postgresU="myuser"
postgresP="mypass"
postgresH="myhost"
postgresDB="mydb"
postgresC="postgres://${postgresU}:${postgresP}#${postgresH}:5432/${postgresDB}"
and then process it with:
const dotenv= require('dotenv')
const dotenvExpand = require('dotenv-expand')
let myEnv = dotenv.config()
dotenvExpand(myEnv)
let connectionString = process.env.postgresC;
console.log(connectionString)
postgres://myuser:mypass#myhost:5432/mydb