How to import modules/plugins recursively? - javascript

I'm trying to load all the "modules" contained in a particular directory. All of these can be individually loaded like this:
import 'dir1/plugins/one'
import 'dir1/plugins/two'
import 'dir1/plugins/three'
I've tried using something that sounded close to what I wanted to do:
require.context('dir1/plugins', true, /index\.js/)
This seems to load the files, as I can see their contents in the entry point, but I'm unable to use their functions later in my code.
I'm thinking I'm using require.context incorrectly, or it's doing something totally different as I'm understanding it. My goal is to not be forced to include every single plugin individually, as I want to load them all without exception.
Any hints?

Related

Is it possible to import a chunk of Js code to a file as it was already there?

I have a component in my app that is getting big... So I moved some chunks of code to another files (conditional and list renders to be specific).
Can I use it like a rails partial, for example? or a script tag?
I woudn't like to create a new component,it's just some code i wanna split.
of course there is a way, but do I have to import all the things (components, states, etc) to this file?
couldn't I do smt like this?
import myChunkOfCode from 'some/path';
// and then place it here like a script tag?
<myChunkOfCode>
and then this code that does not make any sense alone works pretty well when imported, without complaining about undefined stuff and etc...

Import function from sister file Node.JS

I hope to explain this in a non-abstract way. I have a problem and I believe that I am pushing the boundaries of Node because there doesn't seem to be much documentation on this particular subject.
To start out, this is my file layout.
//main.js
var 1 = require('1.js');
var 2 = require('2.js');
The purpose of this first file is to load two child files into the process.
//1.js
console.log('Test');
module.exports = function msgUSR(text){
console.log(text);
}
The purpose of this file is to create an export, this export could very obviously be imported into Main.js , however, I have a situation where I need to import a function from 1.js into 2.js without reloading the entire file into memory.
for example.
//2.js
var msgUSR = require('1.js');
msgUSR('blah');
The problem with this setup is that when you require 1.js, it reloads the entire file, including any code that isn't an export.
How could I only import the exports of a file without loading the unrelated code.
Thank you! I know someone has a solution to this.
EDIT:
I understand that the code here wouldn't replicate any useful data. My point is, how do I require a function in another JS file that is already required by a parent file. Instead of writing two long hefty functions that are exactly alike in two different files, I need to be able to call the function from a sister file.
Here is why this is an issue.
If you were to require the file after the parent has required it, 'Test' would appear two times, symbolically meaning that other complex code would also be loaded.
My hopeful result from this question would be a result where I could require the file in such a way as to only import a function from it.
Thanks again.
The problem with this setup is that when you require 1.js, it reloads
the entire file, including any code that isn't an export.
When you require something the file will be loaded once and then is cached
How could I only import the exports of a file without loading the
unrelated code?
You would never have to reload the file once it is already required since Node will use the cached version.
The require function normally has 5 steps:
Resolving: To find the path of the file
Loading: To determine the type of the file content
Wrapping: To give the file its private scope. This is what makes both the require and module objects local to every file we require.
Evaluating: This is what the VM eventually does with the loaded code.
Caching: So that when we require this file again, we don’t go over all the steps another time.

dynamic import statement from an array

I'm building a meteor app, and I'd like to know if it's possible to do something along the lines of:
var pages = [
'home',
'contact',
'other'
];
for(var page in pages){
import `/path/${page}`;
}
It's a small thing, but It would make things much simpler when it scales up. The above code doesn't compile, because import doesn't allow for interpolation. I've looked into using require syntax, which compiles, but can't find the files if I use interpolation. I also tried using meteor's dynamic-imports package, but couldn't figure it out.
Unfortunately most (if not all) build engines do not support interpolated import paths. They perform a static analysis to determine loaded assets.
Even Meteor dynamic imports need static paths, the "dynamic" part is about when the loading actually takes place, but Meteor still needs to know the path in advance.

ES6 Importing working differently in different files

I have two different files in the same folder, both with the same code for importing in them.
import { PartialOne, PartialTwo } from 'components/partials'
console.log(PartialOne);
In the first file, the importing works correctly and the PartialOne function is displayed in the console. In the second, PartialOne is logged as undefined.
To make sure, I also tried:
import * as partials from 'components/partials'
console.log(partials);
And it returned an object-esque thing that had PartialOne and PartialTwo as properties. So, I'm pointing to the right exported file in both files that are trying to import it, but something is getting messed up, and can't figure out what.
I'm not sure what's going on so it's hard to know what to search for in Google/SO, but if there's another related SO question that would be helpful to have too.
(From the comment by loganfsmyth):
Check if there is a cycle in your dependency graph. That usually leads to issues like this, e.g. the export class ParitalOne {} line hasn't run yet, so the value shows as undefined

Load file contents before any transformation

I'm trying to use Webpack with React to build a documentation site, and I'd like to be able to show the example code alongside the example. I'd rather do this dynamically so I never forget to sync up, but I'd rather it not be a separate step in the build process. Of course, I figured I couldn't do this at run-time with fs.readFile or something for a number of reasons (it would be browser-side and the file wouldn't exist anyways).
So I thought I'd try raw-loader. That gave me the post-babel result, which is... better than nothing, but I want the original source. raw-text-loader gave me the same thing. Is there anything I can do to get the original source code?
Is there anything I can do to get the t
Oh, maybe not the most intelligent thing, but I had to import using
import ExampleText from '!raw!./Example.js'
instead of
import ExampleText from 'raw!./Example.js'
Sorry if that was obvious. =)

Categories

Resources