1

I'm trying to make every file exported as module in a certain folder, to be imported used as a single object. How should I do this?

I had made a javascript plugin with a long long single file. and I'm now trying to make it to be separated by several files. I'm using Webpack for it.

And, in my plugin code, there was a huge object named "fn" which contains 40~50 functions with 200~300lines each. To split them, I made a folder named "fn" and puts each functions as each files. Each name of file and name of function are identical. so function named "foo" is exported by default in a file named "foo.js" in "fn" folder.

And now I'm trying to import them all and export it as a single object like this.

src/fn/foo_or_whatever.js

export default function aFunctionWhichIUse(){
  // return whatever;
}

src/fn/index.js

import foo from './foo';
import bar from './bar';
import fooz from './fooz';
import baz from './baz';
import kee from './kee';
import poo from './poo';
import tar from './tar';
import doo from './doo';
.
.
.
import foo_or_whatever from './foo_or_whatever';

export default {
  foo,
  bar,
  fooz,
  baz,
  kee,
  poo,
  tar,
  doo,
  .
  .
  .
  foo_or_whatever,
}

src/index.js

import fn from './fn'

But I don't think it does make sense. Now I have to type same word every four times just to add a function in a "fn" object.

I've found that importing all files from folder is not supported in import/export system. then, What should I use and how should I write code to do that?

Is there some way to do like this? I don't matter whether the way is or not import/export system, as long as if the way works on the webpack.

src/index.js

import * as fn from './fn';
Bad Dobby
  • 376
  • 1
  • 3
  • 13

2 Answers2

2

Doing this automatically might seem a good idea, but with webpack it's going to then need special plugins to handle it.

But another alternative if the repeating part is your main concern I might have another idea for you.

Webpack can handle commonjs modules too. So what you could do is ->

module.exports = {
  foo: require('./foo'),
  bar: require('./bar'),
  fooz: require('./fooz'),
  baz: require('./baz'),
  kee: require('./kee'),
  poo: require('./poo'),
  tar: require('./tar'),
  doo: require('./doo')
};

Another advtange is if say ou wanted to temporyly replace baz, you could just change the require to ./baz-temp etc.

Also it's always a good idea to name files in lowercase, so if you wanted to include a class doing this automatically would be a problem,. But just do -> Foo: require('./foo') would be fine.

Keith
  • 15,057
  • 1
  • 18
  • 31
  • making possible to change it's name is good. But in my case, I need something that doesn't need to be handle. – Bad Dobby Mar 25 '19 at 13:07
2
const fs = require('fs');
const path = require('path');

const basename = path.basename(__filename);
const functions = {}

fs
  .readdirSync("./")
  .filter(file => (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'))
  .map((file) => {functions[file.slice(0, -3)] = require(path.join(__dirname, file})))

module.exports = functions;

Would something like this help?

SerShubham
  • 803
  • 4
  • 10
  • can I use fs in webpack? The thing I'm working on it is not running on webserver – Bad Dobby Mar 25 '19 at 13:00
  • 1
    `can I use fs in webpack? ` webpack is just a node package, so if you can run webpack, you can run the above code. – Keith Mar 25 '19 at 13:10
  • @keith not really. – Jonas Wilms Mar 25 '19 at 13:15
  • @JonasWilms Not sure what you mean, are you saying you don't need node anymore for webpack to work?. – Keith Mar 25 '19 at 13:18
  • @jeith no, I'm saying your statement is missing the point. Webpack does bundle all modules, therefore `require` might fail at runtime, if webpack does not include the scripts in the bundle. A webpack module loader might be the better choice here – Jonas Wilms Mar 25 '19 at 13:20
  • 1
    @JonasWilms I'm not sure the above is something the poster meant to be run at runtime, but rather code he could use to make the `.js` file. – Keith Mar 25 '19 at 13:23
  • @keith the above doesn't even run because of typos, I'm not sure why it got accepted. And no, compile time code would be some kind of webpack plugin. – Jonas Wilms Mar 25 '19 at 13:24
  • @JonasWilms I've fixed the typos. Seems to be working fine for me. – SerShubham Mar 25 '19 at 13:28
  • @Keith It's true. I'm going to build a .js file with webpack `libraryExport` config. – Bad Dobby Mar 25 '19 at 13:33