这是模糊的 - 我提前道歉，我试图以我有限的理解尽可能简洁，同时暴露我可能不正确的假设。
我有一个网站，实际上是一个巨大的 HTML 文件。它运行 <scripts> 中内嵌定义的脚本。标签。
我的目标是将所有脚本移至单独的 .js 中文件并将其拉入 index.html (或在需要时相互连接)。我熟悉 Node 的 require 的用法我很熟悉import ，如 Angular 中所用。我强调使用，因为我真的不知道如何它们的工作原理。
假设 1:我无法使用 require - 它纯粹用于 Node.js。我提出这个问题的原因是我很确定我在 AngularJS 1.5 中看到了 require代码，所以假设让我感到不舒服。我猜测这是由 WebPack、Gulp 或类似工具拼接在一起的。
假设 2:我应该使用 import ，但导入仅适用于 URL 地址，如果我有 .js托管在服务器或 CDN 上，它将被拉取。但是，我无法在这里提供本地路径(在服务器上)- index.html在提供服务时不会自动引入依赖项。我需要 npm/Webpack/other预编译我的index.html如果我希望将部门拉到服务器上。
假设 3:预编译为单个、随时可用的 html 文件是构建内容的所需方式，因为可以快速提供该文件(假设它已准备就绪)。我根据最近从 CDN 提供 Markdown 的趋势做出假设， JAMstack 的出现，以及使用 Jekyll 等的网站数量(当然对于传统的 Jekyll 网站而言)。
假设 4:我最终也想使用 Typescript，但我认为这不会改变任何事情，因为我只会引入 TS 将其编译为 .js然后使用我上面使用的任何解决方案
问题:如果我清楚我想要做什么以及什么让我困惑，那么研究 npm/Webpack 是一个不错的解决方案。将我的.js缝合在一起文件？使用import/export将它们缝合在一起需要什么准备？ ？如果是这样，是否有一个通常如何完成此操作的示例？
最佳答案
正如您所提到的，require 不能用于您的目的，因为它是 CommonJS 和 NodeJS 模块系统的一部分。有关 require 的更多信息可以在这里找到:What is this Javascript "require"?
Import是ES2015标准的JS语法。但 ES2015 标准及其之上的所有标准的浏览器支持非常有限。您可以在这里阅读更多相关信息:Import Reference
但是，您仍然可以使用最新标准进行编码(从而可以使用导入/导出等)，然后将代码转译为能够在浏览器上运行。为了做到这一点，您需要一个转译器。您可以引用 Babel，它是最流行的转译器之一:https://babeljs.io/
为了您的确切目的，您需要使用模块 bundler 。 Webpack/Rollup 等是一些流行的模块 bundler 。它们可以自动识别通过导入引用的所有 JS 文件，将它们组合起来，然后转译代码以便能够在浏览器上运行(它们还使用转译器)并生成单个 JS 文件(或多个，根据您的配置)。
可以引用Webpack的入门指南:https://webpack.js.org/guides/getting-started/
或 RollupJS:https://rollupjs.org/guide/en#quick-start
关于javascript - 导入，需要吗？如何将 Javascript 文件混合在一起？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53574511/