javascript – 如何使用非模块文件中的js模块

我是使用js模块的初学者.

我正在开发一个相当简单的Web应用程序.它使用typescript和angular 2,它们很大程度上依赖于模块.

我的大多数应用程序文件’导入’一个或多个js模块(通常大多数是角度2模块).

据我了解,因为我的app ts文件有一个顶级’import’,它们会被typescript自动视为js模块.

但是,我希望我的任何其他应用程序ts文件都可以访问我的任何应用程序ts文件,而无需相互“导入”.但因为它们现在是模块本身,所以要求我这样做……

可能吗？

对我而言,对于我的每个app ts文件,我都应该声明我在那里使用的所有app ts文件(我喜欢使用单个类/接口的小文件).另外,这依赖于相对路径,一旦我重构我的文件夹结构就会中断.

我是否以错误的方式思考这个问题？

解决方法:

为每个文件声明依赖关系(例如模块)是一把双刃剑.

优点是没有“魔力” – 你确切知道每个函数,变量,类等的来源.这使得更容易了解正在使用的库/框架以及在何处查找问题.将它与Ruby on Rails与Ruby Gems使用的相反方法相比较,其中没有声明任何内容并且所有内容都是自动加载的.根据个人经验,我知道尝试锻炼some_random_method的地方以及我可以访问的方法/类是绝对的痛苦.

你是对的,缺点是多次导入和移动相关文件会变得非常冗长.现代编辑器和IDE(如WebStorm和Visual Studio Code)具有在移动文件时自动更新相对路径的工具,并在您引用另一个模块中的代码时自动添加导入.

多次导入的一个实用解决方案是创建自己的“组”导入文件.假设您在所有文件中使用了大量实用程序函数 – 您可以将它们全部导入到单个文件中,然后在其他地方引用该文件：

//File: helpers/string-helpers.ts

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

export const touppercase = touppercase;
export const truncate =  truncate;

然后在任何其他文件中：

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

这样做的缺点是它可能会破坏tree shaking,其中诸如webpack之类的工具会删除未使用的代码.