ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-06-08 17:22:45  阅读:305  来源: 互联网

标签:javascript typescript angular node-modules


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

标签:javascript,typescript,angular,node-modules
来源: https://codeday.me/bug/20190608/1199205.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有