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

How to use js modules from non-module files(如何使用非模块文件中的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等工具会删除不使用的代码。

这篇关于如何使用非模块文件中的js模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！