3 ms·
The issue is that JavaScript (by extension TypeScript) doesn't have the concept of folders. You can only import a single file per import statement. Developers
by apatheticonion 6y ago
The issue is that JavaScript (by extension TypeScript) doesn't have the concept of folders.
You can only import a single file per import statement.
Developers create "barrel" files that allow them to re-export all of the important stuff in a folder externally. This allows for namespacing
// foo/index.ts
export * from './foobar'
// main.ts
import * as foo from './foo/index'
new foo.Foobar()
Or use destructured imports to help with static analysis tool that trace imports removing unused references from the final build
// main.ts
import { Foobar } from './foo/index'
Node has non standard behaviour where it appends `/index` to the import path if it's a folder allowing you to shorten imports to
import {} from './foo'
- z3t4 6y agoGotcha in ES6 import is that you need to import the default export specifically eg. import default as Foo, * as Bar It would be much easier if it was one namespace like in Node.js require. eg. var Foo = await requires("foo", {fs: "/home/user"}) Node.js modules are pretty much perfect besides the security flaws.
- apatheticonion 6y agoYeah I am sad that ES6 imports don't allow for easy namespacing. You can get around this with a double barrel. In the outer barrel, export your individual things // index.barrel.js export * from './foo.js' Then in your main barrel re-export them under a namespace // index.js export * as foobar from './index.barrel.js' Then from you application you are forced to have a named import with the namespace defined // main.js import { foobar } from './foobar/index.js' foobar.foo() You can submit a proposal to introduce namespacing to ES6 imports