How do I export a number modules via an index.js file while making sure they don't impact performance? Probably best explained with a source code:
// index.js
module.exports = {
Database : {
db : db,
},
Helpers : {
_ : lodash,
util : util
}
};
I am trying to avoid loading the Database dependency if all I need is Helpers.util.
using the snippet below, which is what I am using is also loading the Database dependency every ime:
const Core = require('#myapp/core');
const util = Core.Helpers.util;
my package.json is setup as:
{
...
"main": "src/index.js",
...
}
I have some ideas of what should be able to happen, but not sure the best way to address this:
package.json - is there a way to specify multiple main locations?
index.js javascript file - can I do anything else in the javascript file, like wrapping it in a function?
write the require in a different way? like const util = require('#app/core/src/Helpers/util');
Related
I want to create an object that would import functions from another folder and it would look something like this:
class = {
functions: {
//All functions here
}
}
The functions would be inside of a different folder, however, I want to make some sort of importer in which it would make new classes for each new function/file it finds inside of the folder.
someFunction.js Function File:
function someFunction() {
console.log("this is some function");
}
So I would like for something to look like this:
class.functions.someFunction()
No, I do not want to have it hard coded into the object, I want to import all functions from a folder and create functions like that.
Well, first I wan't to answer your question as I think you want, even if I also think it is not the correct way to proceed.
I'll also assume that with class you are not referring to an actual ES6 Class, but we are talking about a plain object.
So this is the code:
const fs = require('fs');
const path = require('path');
function importer(dirPath) {
const absoluteDirPath = path.normalize(
path.isAbsolute(dirPath)
? dirPath
: path.resolve(process.cwd(), dirPath)
);
const output = {
functions: {}
};
const content = fs.readdirSync(path.normalize(absoluteDirPath));
content.forEach((basename) => {
const absoluteItemPath = path.join(absoluteDirPath, basename);
if (fs.statSync(absoluteItemPath).isFile() && /\.js$/i.test(basename)) {
output.functions[basename.slice(-3)] = require(path.relative(
__dirname,
absoluteItemPath
));
}
});
return output;
}
module.exports = importer;
For this to work, all your functions in your files should be exported like:
module.exports = function myFunction() {};
To use the 'importer', you just do:
const artemis = importer('/path/to/directory'); // PATH MUST BE ABSOLUTE OR RELATIVE TO CWD.
/*
SUPPOSING THAT YOUR DIRECTORY CONTAINS THE FOLLOWING FILES:
function1.js
function2.js
Then you can do:
artemis.function1();
artemis.function2();
Please note that your files must be named in a JS friendly way (a valid string for an object key).
*/
A final important note about this odd method: This will only ever work in a NodeJS environment. Even if functions could have worked in other environments (like a browser). The next method, will work for any ECMAScript environment after proper building process: transpilation (EX: Babel) and bundling (EX: Webpack).
Suggested Solution
Use ES6 Static import / export like modern JS libraries do. This comes with huge benefits, from static code analysis to tree shaking and more.
Let's suppose the following hierarchy:
// - index.js
// - internals/
// - index.js
// - module-1.js
// - module-2.js
internals/module-1.js
function module1() {}
export {module1};
internals/module-2.js
import {module1} from 'module-1.js';
function module2() {
// YOU CAN USE module1 IF YOU NEED. (AVOID CIRCULAR REFERENCES)
module1();
}
export {module2};
internals/index.js
import {module1} from './module-1.js';
import {module2} from './module-2.js';
export {module1, module2};
index.js
import * as moduleGroup from './internals/index.js';
export {moduleGroup};
Finally, where you import your moduleGroup, you can do:
moduleGroup.module1();
moduleGroup.module2();
Obviously this is a basic scenario, but this is, IMHO, the correct way to deliver a group of functions and other stuff. Please let me know if you have any doubt.
I know this question maybe exist in stack overflow but I didn't get any good answers, and I hope in 2020 there is better solution.
In my react app I have a config JSON file, it contains information like the title, languages to the website etc..
and this file is located in 'src' directory
{
"headers":{
"title":"chat ",
"keys":"chat,asd ,
"description":" website"
},
"languages":{
"ru":"russian",
"ar":"arabic",
"en":"English"
},
"defaultLanguage":"ru",
"colors":{
"mainColor":"red",
"primary":"green",
"chatBackGround":"white"
}
}
I want to make my website easy to edit after publishing it, but after I build my app, I can't find that settings.json file there in build directory.
I find out that files in public directory actually get included to build folder, I tried to put my settings.JSON in public,
but react won't let me import anything outside of src directory
I found other solutions like this one but didn't work
https://github.com/facebook/create-react-app/issues/5378
Also I tried to create in index.html a global var like (window.JSON_DATA={}), and attach a JS object to it and import it to App.js, but still didn't work.
How can I make a settings JSON file, and have the ability to edit it after publishing the app?
Add your settings.json to the public folder. React will copy the file to the root of build. Then load it with fetch where you need it to be used. For example if you need to load setting.json to the App.js then do the next:
function App() {
const [state, setState] = useState({settings: null});
useEffect(()=>{
fetch('settings.json').then(response => {
response.json().then(settings => {
// instead of setting state you can use it any other way
setState({settings: settings});
})
})
})
}
If you use class-components then do the same in componentDidMount:
class CustomComponent extends React.Component {
constructor(props) {
super(props);
this.state = {settings: null};
}
componentDidMount() {
fetch('settings.json').then(response => {
response.json().then(settings => {
this.setState({settings: settings});
})
})
}
}
Then you can use it in render (or any other places of your component):
function App() {
...
return (
{this.state.settings && this.state.settings.value}
)
}
The easiest way would be to require() the file on the server during server side rendering of the html page and then inline the json in the html payload in a global var like you mentioned window.JSON_DATA={}. Then in your js code you can just reference that global var instead of trying to use import.
Of course this approach would require you to restart your server every time you make a change to the json file, so that it get's picked up. If that is not an option then you'll need to make an api call on the server instead of using require().
You may want to look at using npm react-scripts (https://www.npmjs.com/package/react-scripts) to produce your react application and build. This will package will create a template that you can put your existing code into and then give you a pre-configure build option that you can modify if you would like. The pre-configured build option will package your .json files as well. Check out their getting started section (https://create-react-app.dev/docs/getting-started/)
If you don't want to go that route, and are just looking for quick fix, then I would suggest change your json files to a JS file, export the JS object and import it in the files you need it since you seem to be able to do that.
//src/sampledata.js
module.exports = {
sample: 'data'
}
//src/example.jsx (this can also be .js)
const sampledata = require('./sampledata');
console.log(sampledata.sample); // 'data'
you can use 'Fetch Data from a JSON File'
according to link
https://www.pluralsight.com/guides/fetch-data-from-a-json-file-in-a-react-app
example
So, i have several handlebars templates on a far far away folder. I have to import them using
import UserTemplate from '../../../../../../More/Stuff/Omg/Template.handlebar'
I'm thinkg if i could do something nicer, like a function to resolve this for me for instance
let UserTemplate = Templates.get('Template.handlebar');
Then this function would do all those crazy path stuff and import.
Would that be possible somehow ?
There is a package that you can use that already does this module-alias
Under you package.json you would have
"_moduleAliases": {
"#Templates" : "./templates/"
}
Then you could query these as follows
import UserTemplate from '#Templates/UserTemplate'
Also if you are using webpack you could use their built-in functionality of this https://webpack.js.org/configuration/resolve/.
Let's say I have 5 jsx files and each file uses some config parameter.
My index.js file imports all of these 5 jsx files.
Instead of having my config data spread accross 5 files, is there a way for my jsx files to get the data from a global JS object which has loaded the data from a config file?
I've seen some examples, but I've not been able to get them to work.
JS6 import function | Example using webpack
Assuming ES6:
config.js
export const myConfig = { importantData: '', apiUrl: '', ... };
Then:
jsxFileOne.js, jsxFileTwo.js, ...
import { myConfig } from 'config.js';
There are other ways to import & export things globally leveraging webpack, but this should get you started.
If your project is built using Webpack, consider using node-env-file.
Example config file snippets:
development.env
API_SERVER_URL=https://www.your-server.com
webpack.config.js
const envFile = require('node-env-file');
...
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env';
try {
envFile(path.join(__dirname + appSettingsFile));
} catch (error) {
console.log("Failed to read env file!: " + __dirname + appSettingsFile);
}
...
plugins: [
new webpack.DefinePlugin({
"process.env": {
API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL)
}
})
...
]
Inside your js/jsx code, you can now access process.env.API_SERVER_URL variable which will contain the required value.
It seems dotenv package is more popular, you can try this out as well.
Very old problem, that nobody took the time to solve, until now. I leave this for future readers because this is a top search result for configuration in React.
I created wj-config to deal exactly with this. Be sure to pay close attention to the React notes as you will need to enable top-level awaits in webpack, either by ejecting or using the #craco/craco NPM package.
You may also read this blog post that explains its use.
I have a small EmberJS application that uses Ember-Cli. My application has a private ES6 library that is a bower dependency. Basically, what I want is to import the library and use it wherever I want.
If I'm not wrong, I should transpile the library in my brocfile.js and use it afterwards. Unfortunately, I cannot provide too much concrete information but I'll try my best to be the clearer possible.
My external library is named main-lib and is structured the following way (it is working in another project):
bower_components
main-lib
api.js
main.js
message.js
In the main.js file, I have the following:
import Api from 'main/api';
import Message from 'main/message';
var main = {};
main.api = Api;
main.message = Message;
export default main;
So, what I want to do, is, in my application, to import main and use the different functions it contains.
Example, in a certain emberjs controller:
import Main from 'main';
//use Main here
To do so, I thought of doing the following in my brocfile.js
var tree = 'bower_components/main-lib';
var ES6Modules = require('broccoli-es6modules');
var amdFiles = new ES6Modules(tree, {
format: 'amd',
bundleOptions: {
entry: 'main.js',
name: 'mainLib'
}
});
However, this does nothing. Basically, I want the transpiled files to be included in vendor.js or somewhere where I would be able to use the library by importing it.
There's something I'm missing here but I can't pinpoint it.
Edit1: After adding these lines at the end of my brocfile.js:
mergeTrees = require('broccoli-merge-trees')
module.exports = mergeTrees([app.toTree(), amdFiles]);
I can get an ES5 that looks like this:
define(['main/api', 'main/message'], function(api, message) {
var main = {};
main.api = Api;
main.message = Message;
var _main = main;
return _main;
});
The problem is that it does not import main/api and main/message as well. Do I have to repeat the code for each file that I want ?
Also, the file is not concatenated in vendor.js but simply but at the root of /dist
You have the following: import Api from 'main/api' - but I don't see a folder called main in what you've explained - only a folder called main-lib ...
Could it be that main/api and main/message are not included because they actually don't exist? You might need to use main-lib/api and main-lib/message in your main.js file
The integration of Broccoli with ember-cli already includes a transpiler, so I think something like this should be enough:
app.import('bower_components/main-lib/main.js', {
type: 'vendor',
exports: { 'main': ['default'] }
);
And then you can:
import Main from 'main';
With what you currently have in your Brocfile you still need to merge your amdFiles (app.import would do that for you).
Something like:
mergeTrees = require('broccoli-merge-trees')
module.exports = mergeTrees([app.toTree(), amdFiles]);
None of this is tested, but you get the idea.
Ember seem to be advocating using: https://www.npmjs.com/package/broccoli-es6modules
This would mean importing your module would look something like:
var mergeTrees = require('broccoli-merge-trees');
var tree = './bower_components/main-lib';
var ES6Modules = require('broccoli-es6modules');
var amdFiles = new ES6Modules(tree, {
format: 'amd',
bundleOptions: {
entry: 'main.js',
name: 'main-lib'
}
});
module.exports = mergeTrees([app.toTree(), amdFiles])