Question

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

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

我的大多数app ts文件'导入'一个或多个js模块（通常大多数是角度2模块）。

据我了解，因为我的app ts文件有一个顶级'import'，所以它们会被typescript自动视为js模块。

但是，我希望我的app ts文件可以被任何其他app ts文件访问，而不必相互“导入”。但是因为它们现在是模块本身，所以要求我这样做......

有可能吗？

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

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

Answer 1

为每个文件声明依赖项（例如模块）是一把双刃剑。

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

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

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

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

Answer 2

你必须有一个js文件，它是你的应用程序的入口点吗？..所以在那个文件中只导入你想要访问的所有模块而不导入并将它们附加到window对象。由于窗口对象是全局可用的，因此您可以从任何位置访问模块，而无需导入相应的模块。例如，

考虑这种情况：您在名为module1.ts的文件中有一个模块应用程序的入口点是名为index.ts的文件你有一个module2，你需要module1

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

在index.ts

中

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

window.add = add

现在在module2

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

由于窗口对象在全局可用，因此您可以根据需要为其添加任意数量的属性。就类型解析而言，您可以在.d.ts文件中声明一个带有所需的add函数的窗口模块，如下所示：

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

Answer 3

这根本不是疯了。你肯定是以错误的方式思考。
实际上你不喜欢它是所有现代编程语言中的一个共同特征，它使应用程序的代码和结构更加清晰易懂。

没有进口和上学的方式对我来说看起来很疯狂:) 你可以只有这么多全局变量的混乱。

Answer 4

是否可能

没有任何简单的方法。 ts文件是一个模块并使用例如需要填充的module.exports（如果是commonjs）。这只是运行时的故事。 TypeScript故事将更难，一种方法是为模块创建一个.d.ts文件，将内容声明为全局。

像我说的那样。不值得做。模块是前进的方式，而不是制造hacky。

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

4 个答案: