导入，需要？ 如何将Javascript文件混合在一起？

Question

这是模糊的-我先向您道歉，在我暴露自己潜在的错误假设的同时，我会尽我所能表达的简洁。

我有一个实际上是一个巨大的HTML文件的网站。 它运行在<scripts>标记中内联定义的<scripts> 。

我的目标是将所有脚本移动到单独的.js文件中，然后将它们拉入index.html （或在需要时彼此拉入）。 我熟悉Node的require的用法 ，也熟悉Angular中使用的import 。 我强调用法，因为我真的不知道它们是如何工作的。

假设1：我不能使用require -这纯粹是Node.js的 我提出这个问题的原因是，我很确定我已经在AngularJS 1.5代码中看到了require，所以假设使我感到不舒服。 我猜这是由WebPack，Gulp或类似的公司缝合在一起的。

假设2 ：我应该使用import ，但是import仅适用于URL地址，如果我的.js托管在服务器或CDN上，它将被拉出。 但是，我不能给本地路径（在服务器上）在这里- index.html将不会在依赖关系自动拉而被服务。 如果需要将deps插入服务器，则需要 npm/Webpack/other来预编译index.html 。

假设3 ：预编译成单个html文件是构建事物的理想方法，因为可以快速提供文件（假定已准备就绪）。 我以最近从CDN提供Markdown服务的趋势， JAMstack的出现以及使用Jekyll等的站点数（尽管传统的Jekyll站点被承认）的趋势做出了假设。

假设4 ：我最终也想使用Typescript，但是我认为没有任何变化，因为我只是将TS编译为.js ，然后使用上面使用的任何解决方案

问题 ：如果很清楚我要做什么，什么让我感到困惑，是否是一个不错的解决方案，可以研究npm/Webpack来整理我的.js文件？ 使用导入/导出 ，如何准备将它们组合在一起？ 如果是这样，是否有一个通常如何完成此操作的示例？

Answer 1

正如您提到的，require不能用于您的目的，因为它是CommonJS和NodeJS模块系统的一部分。 有关require的更多信息，请参见： Java语言“ require”是什么？

导入是ES2015标准JS语法。 但是ES2015标准及其之上的所有内容对浏览器的支持都非常有限。 您可以在此处了解更多信息： 导入参考

但是，您仍然可以使用最新标准进行编码（从而启用导入/导出等功能），然后转换代码以使其能够在浏览器上运行。 为此，您需要一个翻译器。 您可以参考最受欢迎的翻译器之一Babel： https ://babeljs.io/

为了您的确切目的，您需要使用模块捆绑器 。 Webpack / Rollup等是一些流行的模块捆绑器。 他们可以自动识别通过导入引用的所有JS文件，对其进行组合，然后进行代码转换，以使其能够在浏览器上运行（它们也使用翻译器），并生成单个JS文件（或多个，取决于您的配置）。

您可以参考Webpack入门指南： https ://webpack.js.org/guides/getting-started/

或RollupJS： https ：//rollupjs.org/guide/en#quick-start