javascript - How to use js modules from non-module files - Stack Overflow

admin管理员组

文章数量:1193356

I'm a beginner at using js modules.

I'm working on a fairly simple web application. It uses typescript and angular 2, which heavily relies on modules.

Most of my app ts files 'import' one or many js modules (usually mostly angular 2 modules).

As I understand, because my app ts files have a top level 'import', they are automatically considered a js module by typescript.

However, I want any of my app ts files to be accessible by any other of my app ts files, without having to 'import' each other. But because they are now modules themselves, ts requires me to do that...

Is it possible?

It seems crazy to me that for each of my app ts file, I should have to declare every other of my app ts files that are used in there (I like to have tiny files with a single class/interface). In addition, this relies on relative paths which breaks as soon as I restructure my folder structure.

Am I thinking about this the wrong way?

I'm a beginner at using js modules.

I'm working on a fairly simple web application. It uses typescript and angular 2, which heavily relies on modules.

Most of my app ts files 'import' one or many js modules (usually mostly angular 2 modules).

As I understand, because my app ts files have a top level 'import', they are automatically considered a js module by typescript.

However, I want any of my app ts files to be accessible by any other of my app ts files, without having to 'import' each other. But because they are now modules themselves, ts requires me to do that...

Is it possible?

It seems crazy to me that for each of my app ts file, I should have to declare every other of my app ts files that are used in there (I like to have tiny files with a single class/interface). In addition, this relies on relative paths which breaks as soon as I restructure my folder structure.

Am I thinking about this the wrong way?

• javascript
• angular
• typescript
• node-modules

Share Improve this question Follow edited Sep 7, 2016 at 23:43 Clement asked Sep 7, 2016 at 23:38 ClementClement 4,29744 gold badges4747 silver badges4747 bronze badges 1

• This form of dependency injection is usually intended to restrict access (in order to make code more modular) to code that is not required in a given module--instead requiring you to explicitly declare dependencies. If all of your modules have access to every other module you're using, it sounds like you might want to reconsider the way you're designing your application, but maybe I just don't understand correctly. – kondrak Commented Sep 8, 2016 at 4:53

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 8

You must have a js file which is an entry point to your application right?.. So in that file just import all the modules which you want to access without importing and attach them to the window object. Since the window object is available globally, you can access your module from anywhere without importing the corresponding module. For example,

Consider this scenario: You have a module in a file called module1.ts The entry point of your application is a file called index.ts And you have a module2 where you require something from module1

// module1.ts
function add(first: number, second: number): number {
    return first + second
}
export {add}

in your index.ts

// index.ts
import {add} from '<path to module1>/module1';

window.add = add

Now in your module2

// module2.ts
window.add(1, 2)

Since the window object is available globally you can attach as many properties to it as you like. As far as the type resolution is concerned you can declare a window module with the add function you require in a .d.ts file as follows:

declare module window {
add: (first: number, second: number) => number 
}

Declaring dependencies (e.g modules) for each file is a double-edged sword.

The advantage is that there is no 'magic' - you know exactly where each function, variable, class etc. is coming from. This makes it much easier to know what libraries / frameworks are being used and where to look to troubleshoot issues. Compare it to opposite approach that Ruby on Rails uses with Ruby Gems, where nothing is declared and everything is auto-loaded. From personal experience I know it becomes an absolute pain to try to workout where some_random_method is coming from and also what methods / classes I have access to.

You're right that the disadvantage is that it can become quite verbose with multiple imports and moving relative files. Modern editors and IDEs like WebStorm and Visual Studio Code have tools to automatically update the relative paths when you move a file and also automatically add the imports when you reference code in another module.

One practical solution for multiple imports is to make your own 'group' import file. Say you have a whole bunch of utility functions that you use in all your files - you can import them all into a single file and then just reference that file everywhere else:

//File: helpers/string-helpers.ts

import {toUppercase} from "./uppercase-helper";
import {truncate} from "./truncate-helper";

export const toUppercase = toUppercase;
export const truncate =  truncate;

Then in any other file:

import * as StringHelpers from "../path-to/helpers/string-helpers";
...
let shoutingMessage = StringHelpers.toUppercase(message);

The disadvantage of this is that it may break tree shaking, where tools such as webpack remove unused code.

Is it possible

Not in any easy way. The ts file is a module and uses e.g. module.exports (if commonjs) that will need to be shimmed out. And that is just the runtime story. The TypeScript story will be harder and one way would be to make a .d.ts file for the module stating the contents as global.

Like I said. Not worth doing. Modules are the way forward instead of making something hacky.

It's not crazy at all. You are definitively thinking in the wrong way.
Actually what you don't like it's a common feature in all modern programming languages and it makes the code and structure of the app a lot clearer and simple to understand.

Without imports and going to old school way looks very crazy to me :)
You can have only chaos with so many global variables.

本文标签： javascriptHow to use js modules from nonmodule filesStack Overflow