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

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

我正在开发一个相当简单的Web应用程序。它使用打字稿和角度2,这严重依赖于模块。

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

据我所知,因为我的应用程序ts文件有顶级的‘导入’,所以它们被类型脚本自动视为js模块。

然而,我希望我的任何应用程序TS文件都可以被我的任何其他应用程序TS文件访问,而不必相互‘导入’。但因为它们现在本身就是模块,所以ts需要我这样做...

可以吗?

对于我的每个应用程序ts文件,我应该声明其中使用的所有其他应用程序ts文件(我喜欢具有单个类/接口的小文件),这对我来说似乎很疯狂。此外,这依赖于我重新构建文件夹结构时立即断开的相对路径。

我是不是想错了?


解决方案

声明每个文件的依赖项(例如模块)是一把双刃剑。

这样做的好处是没有‘魔力’--您确切地知道每个函数、变量、类等来自哪里。这使得了解正在使用什么库/框架以及在哪里查找故障排除问题变得更加容易。将其与Ruby on rails对Ruby Gems使用的相反方法进行比较,在Ruby Gems中,不声明任何内容,所有内容都是自动加载的。根据我的个人经验,我知道试图弄清楚some_random_method来自哪里以及我有权访问哪些方法/类是一件非常痛苦的事情。

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

对于多个import,一个实用的解决方案是创建您自己的‘group’导入文件。假设您有一大堆在所有文件中使用的实用程序函数--您可以将它们全部导入到单个文件中,然后在其他地方引用该文件:

//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等工具会删除不使用的代码。

相关文章