构建时如何通过注释在JavaScript文件中引入其他JS文件

npm生态轻量工具 #

• gulp-include：原生支持//@include 文件名的注释指令，完全匹配你给出的示例语法，仅需简单配置Gulp流程即可实现任意位置代码插入、打包输出，学习成本远低于webpack这类全链路打包工具，适合仅需要代码拼接的轻量场景。
• preprocess：无额外依赖的轻量预处理工具，支持自定义注释匹配规则，将//@include配置为引入指令后，可直接通过命令行或JS API调用完成文件拼接，不需要搭建完整的构建工作流。
• esbuild-plugin-include：搭配高性能esbuild构建工具使用，配置仅需3-5行，支持在代码任意位置插入指定文件内容，构建速度远高于webpack，适合同时需要少量其他构建能力的场景。

VS Code生态扩展 #

• 「File Include」扩展：编辑阶段即可识别自定义的//@include指令，支持路径自动补全、引入代码预览，还可一键导出拼接完成的JS文件。扩展本身做了IntelliSense适配，引入文件内的变量、方法可以被当前文件的智能提示正常识别，极大降低对开发体验的影响。

IntelliSense兼容方案 #

如果所用工具没有自带智能提示适配，可在当前JS文件顶部添加三斜杠引用指令关联引入的文件，示例如下：

/// <reference path="./util.js" />
/// <reference path="./init.js" />

添加后VS Code、TypeScript等工具的智能提示即可正常识别引入文件内的所有导出内容，不会出现未定义报错。

内容的提问来源于stack exchange，提问作者Moss