I would like to be able to import my modules using just name without path.
For example, say I want to use:
import ViewportChecker from 'viewport-checker';
instead of
import ViewportChecker from '../ViewportChecker';
But I want to keep the file where it is and not create a new npm module of it. Would it be possible to define it as module for exmaple in package.json?
You can use webpack's alias feature : https://webpack.js.org/configuration/resolve/#resolve-alias
You can put a default file with naming convention of index.js which contains all the exports.
like:
-App
--home
---index.js // <--it will hold all the exports from otherClass.js and anotherClass.js
---otherClass.js
---anotherClass.js
Now you have to import just folder name and it will automatically search for index.js file to get the particular exported item.
It might look like this:
import Home from './home';
Related
Is it possible to have a JS file import all the imports from another js file? I want to have a set of imports for my react app that only import when the app is in dev mode and I want to store these imports in a dev-config.js file, any ideas?
The export parameters specify individual named exports, while the import * as name syntax imports all of them. Below are examples to clarify the syntax.
import * as myModule from '/modules/my-module.js';
Here, accessing the exports means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes an export doAllTheAmazingThings(), you would call it like this:
myModule.doAllTheAmazingThings();
i learn from https://zhongsp.gitbook.io/typescript-handbook/handbook/module-resolution that with moduleResolution=classic,
the typescript compiler looking for module in this order
/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts
/root/src/moduleB.ts
/root/src/moduleB.d.ts
/root/moduleB.ts
/root/moduleB.d.ts
/moduleB.ts
/moduleB.d.ts
but i found that when i use
import {a} from "a"
it shows can't find module,
my file structure is
|--main.ts
|--a.ts
|--node_modules
it works only when i put a.ts in the folder node_modules
is that moduleResolution=classic is no longer support anymore or something wrong with my configuration?
As statet in the TypeScript Documentation:
Module Resolution Strategy Classic: This used to be TypeScript’s default resolution strategy. Nowadays, this strategy is mainly present for backward compatibility.
I don't know exactly know how your modules look but I assume you have something like this in your a.ts file:
export default a;
if so then you should be able to import your module like this (notice also the path starts with './' for the current folder):
import a from "./a"
but if your a.ts looks more like this (no export default):
export const a....
Than you need to import it like this:
import { a } from "./a"
Check this post for closer information on module imports
Try adding baseUrl to your tsconfig.
see https://www.typescriptlang.org/tsconfig#baseUrl
I am writing a plugin for existing JavaScript app - Forge Autodesk.Viewing
After version 6 they have included THREE.js inside of their app bundle.
Right now I'm able to use it with my plugin like this:
declare var THREE:any;
but I lose all types, so I install three.js by:
npm install --save three
I'm able to use THREE, and import it, but I don't need to Import it as I already have it in my main app. What I need to do is to reference types, so I tried to do something like this:
declare var THREE:THREE;
//Cannot use namespace 'THREE' as a type.
Then I tried to:
/// <reference types='three' /> which works fine, but:
const planes:THREE.Plane[] = []; //this line is okey
planes.push(new THREE.Plane()); //but this says
//'THREE' refers to a UMD global,
// but the current file is a module.
// Consider adding an import instead.
Tsc insists that we should import it:
import * as THREE from 'three';
It compiles without any issues, but when I launch the app it crash, because it's trying to get one more instance of THREE.js, which I do not provide because I have it inside main app.
How to declare the correct reference and keep types to an namespace which is available at main JavaScript application?
There's a TypeScript definition file (.d.ts) for Forge Viewer that you should be able to use together with a THREE.js definition file: https://forge.autodesk.com/blog/typescript-definitions-forge-viewer-and-nodejs-client-sdk-now-available.
Ypu need to import THREE module:
Like this:
import * as THREE from 'three'; // or import THREE from 'three';
or
var THREE = require('Three').
and use webpack or other module loader (!)
If you want to manually include THREEJS distribution file and use TS bindings (type definitions) without modules (not recommended) - you can include Three.d.ts file to your project (with other THREEJS d.ts files) and use it with three slashes ref. For example:
/// <reference path="..\..\node_modules\#types\three\index.d.ts" />
Note: don't import THREE namespace with "import" or "require" in this case.
If you have issue such as:
'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.
(about UMD)
You may try to use option in tsconfig.json:
"compilerOptions": {
"allowUmdGlobalAccess": true,
(about config options)
This will give compiler access to UMD global, so you do not need to import or reference such modules in that case.
And it's exact the case with three.js They alredy add THREE namespace as module to UMD global scope. So if you need to include this module you should import. If you want only reference you could use this option. If typescript doesn't recognize this option in config just update your typescript.
npm install typescript
Thank you dear SalientBrain and dear Petr Broz for your attention and help.
I have an npm package. Let's say example-package. This is normal way of importing.
import RootModule from "example-package";
Now I have one more file nested here.
Package Root > src > Feature > index.js
Now if I have to import this Feature, I would do this.
import Feature from "example-package/src/Feature";
What can I do to avoid developers using my npm package from writing long nested paths and they use something like this.
import Feature from "example-package/Feature";
Just to make it clear, Feature exports multiple options - { A, B ..} . I do not want to import Feature from package and again extract options from Feature. Just want to import it with one slash no matter how long the path is!
I found a solution online. Possible solution would be to create a file /Feature/index.js in the root folder with following content.
module.exports = require('example-package/src/Feature')
Now you can access it like this,
import Feature from "example-package/Feature";
You can add the feature as an export of your index -
index.js:
import Feature from './Feature.js'
export Feature
Then anyone using the package can just import like
import { Feature } from 'example-package'
I am looking to create a main import file using ES6 syntax. I have a components directory with an index.js file.
I would like to export the imports if that makes sense. Essentially, I would like to import then export the individual component files into the index file so I can de-structure my imports from any other files like so:
import {Comp1, Comp2} from "./components"
How do I do this with ES6 syntax?
You can do:
export * from "./components"
// or
export {Comp1, Comp2} from "./components"
How exactly to reference components/index.js depends on your module loader or the module format you're compiling to. I'm not sure what happens if you do export * from multiple modules that have overlapping named exports (will have to check).