I am making a Shared library with the following structure
src
modules
-- module1.ts
-- module2.ts
-- index.ts // reexports from module1.ts and module2.ts
utils.ts // exports someUtils
logger.ts
index.ts // re-exports from utils.js and logger.js
Now in my service-A and service-B I can do something like
import { someUtil } from '#project/shared since someUtil is exported in the main index.ts, but how can I access something exported from module1.ts without having to do import { module1Variable } from '#project/shared/src/modules/index ?
Related
Suppose I have created an npm module named #myscope/blurfl that contains a couple of classes: A, defined in A.js and B defined in B.js, that are both re-exported through blurfl/index.js:
#myscope/
blurfl/
A.js
B.js
index.js
A.js:
export class A {...}
B.js:
import { A } from './A.js';
export class B {...}
index.js:
export * from "./A.js";
export * from "./B.js";
I would prefer to use import { A } from '#myscope/blurfl' instead of import {A} from './A.js' to keep the code cleaner (and make it easier to move an export into a different file), but #myscope/blurfl is obviously not a dependency of #myscope/blurfl itself, so the node module resolver can't find it if I run node index.js to check for missing dependencies.
Is there any way to import another item co-exported from the same index.js file without using the item's explicit filename?
I'm assuming you are using a current version of Node.js (12 LTS or later).
Make sure that the "name" of your package in package.json is really "#myscope/blurfl" (and not just "blurfl").
Now, add an "exports" section to the package.json specifying the relative path of the main export, i.e.
"exports": {
".": "./index.js"
}
You should now be able to use import { A } from '#myscope/blurfl' from within your package, too.
So, to summarize:
Use Node 12 or later.
Check the "name" in package.json.
Add an "exports" section to package.json indicating the main entry point export.
I have files as follows
widgets
|
--tabs
|
-- __mocks_
|
-- index.ts
-- index.ts
--button
|
-- __mocks_
|
-- index.ts
-- index.ts
Its imported/used in files as
import { Button } from 'common/widgets/button';
I can individually mock each of these.
jest.mock('common/widgets/tabs');
jest.mock('common/widgets/button');
But is there a way to mock them all like add all these to file and import them or do like below with a common mock folder and an index file.
jest.mock('common/widgets');
You can do it this way (P.S. All functions and function calls are just for demonstration:
Folder structure
widgets/button/index.js
// demonstration
const someFunction = () => {
console.log("widgets/button")
}
export default someFunction;
widgets/tabs/index.js
// demonstration
const someFunction = () => {
console.log("widgets/tabs")
}
export default someFunction;
widgets/index.js
export { default as Button } from './button/index';
export { default as Tabs } from './tabs/index';
-- Usage
You can import the functions as named import in any file. E.G.:
/any/file.js
import { Button, Tabs } from 'common/widgets'
...
So, you should be able to import them into a single mock file.
mock/index.js
jest.mock('common/widgets');
When we import any module in the test file then jest checks whether there is an mock implementation of that module is present in the ./__mocks__ directory or not. If jest founds it then jest will simple mock that module.
Here in your case, you already have mock modules in your ./__mocks__ directories. You don't need jest.mock() api to mock your modules.
Jest mock is meant to mock modules not directories which contains modules.
I have such files:
app.ts and config/config.ts
When from app.ts I try to import or require config:
import './config/config';
config file completely ignored(code inside config/config.ts is not executed) and no error occur (such as no module found), but If I rename config.ts for example to config-loader.ts and try to import config/config-loader - this works perfectly.
Can someone explain why I can't use file same name as parent folder to load this file later?
UPD:
here is content of app.ts file
import {foo} from './config/config';
console.log('from app');
console.log(foo);
./config/config.ts:
console.log('test from config');
export const foo = 'bar';
app is run with
ts-node -r tsconfig-paths/register app.ts
in console after run I see:
from app
undefined
Try to import an exported module from that file.
import {Config} from './config/config';
where Config is your exported module.
You can also use the JS way like
const config = require("./config/config")
but you will lose the typings.
In your case, the below means run a script.
import './config/config';
runs the script 'config'.
I have the similar folder structure as shown below
/components/organisms
-- ModuleA.vue
-- ModuleB.vue
-- index.js
content of index.js
export { default as ModuleA } from "./ModuleA.vue"
export { default as ModuleB } from "./ModuleB.vue"
If I try to import ModuleB into ModuleA, it generates an error
ModuleA.vue content
<script>
import { ModuleZ } from '#/components/molecules' // component from another directory, it works perfectly
import { ModuleB } from '#/components/organisms' // can't find, error
</script>
You cannot have an cyclic dependency structure with imports.
ModuleA requires index
index requires ModuleA
This generates undefined behaviour when bundled with webpack, usually manifesting as 1 of the files becoming undefined
Is it possible to import a "base script" from a module-like directory with SystemJS, like a Python's __init__.py?
Example:
Directory structure
app/
module1/
__init__.js // or module1.js
module1.weeble.js
module1.thingy.js
module2/
__init__.js // or module2.js
module2.weeble.js
module2.thingy.js
bootstrap.js
module1/__init__.js
import Weeble from "./module1.weeble"
import Thingy from "./module1.thingy"
class Module1 {
constructor() {
this.weeble = new Weeble();
this.thingy = new Thingy();
}
}
export default Module1
bootstrap.js
Import directory to import the base script (__init__.js or module1.js) or something:
import Module1 from "./module1"
import Module2 from "./module2"
let module1 = new Module1();
let module2 = new Module2();
// INSTEAD OF
// import Module1 from "./module1/__init__"
// OR
// import Module1 from "./module1/module1"
Is this possible? Python imports a directory as a module if __init__.py is present in that directory
# so one doesn't have to type
from module/__init__.py import module_part
# but only
from module import module_part
# or to import the entire module
import module
Yup it's possible. Use a index.js file for that:
module1/index.js
Then you can import "./module1";
JavaScript itself isn't a module-based language language (not yet). In order to do this you will need to include another library like RequireJS