如何在另一个 JavaScript 文件中包含一个 JavaScript 文件，类似于 CSS 中的 @import ？原文由 Alec Smart 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

旧版本的 JavaScript 没有导入、包含或要求，因此已经开发了许多不同的方法来解决这个问题。

但自 2015 年（ES6）以来，JavaScript 已经有了 ES6 模块标准来在 Node.js 中导入模块，大多数现代浏览器也支持这一点。

为了与旧浏览器兼容，可以使用 Webpack 和 Rollup 等构建工具和/或 Babel 等转译工具。

ES6 模块

从 v8.5 开始， Node.js 支持 ECMAScript (ES6) 模块，带有 --experimental-modules 标志，至少从没有标志的 Node.js v13.8.0 开始。要启用“ESM”（与 Node.js 以前的 CommonJS 样式模块系统 [“CJS”] 相比），您可以在 package.json 中使用 "type": "module" ，或者为文件提供扩展名 .mjs 。（类似地，如果您的默认值为 ESM，则使用 Node.js 以前的 CJS 模块编写的模块可以命名为 .cjs 。）

使用 package.json ：

 {
 "type": "module"
 }

然后 module.js ：

 export function hello() {
 return "Hello";
 }

然后 main.js ：

 import { hello } from './module.js';
 let val = hello(); // val is "Hello";

使用 .mjs ，您将拥有 module.mjs ：

 export function hello() {
 return "Hello";
 }

然后 main.mjs ：

 import { hello } from './module.mjs';
 let val = hello(); // val is "Hello";

浏览器中的 ECMAScript 模块

自 Safari 10.1、Chrome 61、Firefox 60 和 Edge 16 以来，浏览器已经支持直接加载 ECMAScript 模块（不需要像 Webpack 这样的工具）。在 caniuse 上查看当前支持。无需使用 Node.js 的 .mjs 扩展名；浏览器完全忽略模块/脚本上的文件扩展名。

 <script type="module">
 import { hello } from './hello.mjs'; // Or the extension could be just `.js`
 hello('world');
 </script>

 // hello.mjs -- or the extension could be just `.js`
 export function hello(text) {
 const div = document.createElement('div');
 div.textContent = `Hello ${text}`;
 document.body.appendChild(div);
 }

浏览器中的动态导入

动态导入让脚本根据需要加载其他脚本：

 <script type="module">
 import('hello.mjs').then(module => {
 module.hello('world');
 });
 </script>

在 https://developers.google.com/web/updates/2017/11/dynamic-import 阅读更多内容

Node.js 需要

在 Node.js 中仍然广泛使用的旧 CJS 模块样式是 module.exports / require 系统。

 // mymodule.js
 module.exports = {
 hello: function() {
 return "Hello";
 }
 }

 // server.js
 const myModule = require('./mymodule');
 let val = myModule.hello(); // val is "Hello"

JavaScript 还有其他方法可以在不需要预处理的浏览器中包含外部 JavaScript 内容。

AJAX 加载

您可以使用 AJAX 调用加载附加脚本，然后使用 eval 运行它。这是最直接的方法，但由于 JavaScript 沙盒安全模型，它仅限于您的域。使用 eval 也为错误、黑客和安全问题打开了大门。

获取加载

与动态导入一样，您可以使用 fetch 调用加载一个或多个脚本，使用 Promise 来使用 Fetch Inject 库控制脚本依赖项的执行顺序：

 fetchInject([
 'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
 ]).then(() => {
 console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
 })

jQuery 加载

jQuery 库在一行中提供了加载功能：

 $.getScript("my_lovely_script.js", function() {
 alert("Script loaded but not necessarily executed.");
 });

动态脚本加载

您可以将带有脚本 URL 的脚本标记添加到 HTML 中。为了避免 jQuery 的开销，这是一个理想的解决方案。

该脚本甚至可以驻留在不同的服务器上。此外，浏览器评估代码。 <script> 标签可以插入到网页 <head> 中，也可以插入到结束 </body> 标签之前。

这是一个如何工作的示例：

 function dynamicallyLoadScript(url) {
 var script = document.createElement("script"); // create a script DOM node
 script.src = url; // set its src to the provided URL

 document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
 }

此函数将在页面头部的末尾添加一个新的 <script> 标记，其中 src 属性设置为作为第一个参数提供给函数的 URL。

这两种解决方案都在 JavaScript Madness: Dynamic Script Loading 中进行了讨论和说明。

检测脚本何时执行

现在，有一个大问题你必须知道。这样做意味着 _您远程加载代码_。现代网络浏览器将加载文件并继续执行您当前的脚本，因为它们异步加载所有内容以提高性能。（这适用于jQuery方法和手动动态脚本加载方法。）

这意味着如果您直接使用这些技巧， _您将无法在要求加载后的下一行使用新加载的代码_，因为它仍在加载中。

例如： my_lovely_script.js 包含 MySuperObject ：

 var js = document.createElement("script");

 js.type = "text/javascript";
 js.src = jsFilePath;

 document.body.appendChild(js);

 var s = new MySuperObject();

 Error : MySuperObject is undefined

然后你重新加载页面点击 F5 。它有效！令人困惑…

那么该怎么办呢？

好吧，您可以使用作者在我给您的链接中建议的技巧。综上所述，对于赶时间的人，他在脚本加载时使用事件来运行回调函数。因此，您可以将使用远程库的所有代码放在回调函数中。例如：

 function loadScript(url, callback)
 {
 // Adding the script tag to the head as suggested before
 var head = document.head;
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;

 // Then bind the event to the callback function.
 // There are several events for cross browser compatibility.
 script.onreadystatechange = callback;
 script.onload = callback;

 // Fire the loading
 head.appendChild(script);
 }

然后在 lambda 函数中加载脚本后编写要使用的代码：

 var myPrettyCode = function() {
 // Here, do whatever you want
 };

然后你运行所有这些：

 loadScript("my_lovely_script.js", myPrettyCode);

请注意，脚本可能在 DOM 加载之后或之前执行，具体取决于浏览器以及您是否包含行 script.async = false; .有一篇很棒的关于 Javascript 加载的文章讨论了这个问题。

源代码合并/预处理

如本答案顶部所述，许多开发人员在他们的项目中使用 Parcel、Webpack 或 Babel 等构建/转换工具，允许他们使用即将推出的 JavaScript 语法，为旧版浏览器提供向后兼容性，合并文件，缩小，执行代码拆分等

原文由 e-satis 发布，翻译遵循 CC BY-SA 4.0 许可协议

如果有人正在寻找更高级的东西，请尝试 RequireJS 。您将获得额外的好处，例如依赖性管理、更好的并发性和避免重复（即多次检索脚本）。

你可以在“模块”中编写你的 JavaScript 文件，然后在其他脚本中将它们作为依赖项引用。或者您可以将 RequireJS 用作简单的“获取此脚本”解决方案。

例子：

将依赖项定义为模块：

一些dependency.js

 define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {

     //Your actual script goes here.
     //The dependent scripts will be fetched if necessary.

     return libraryObject;  //For example, jQuery object
});

implementation.js 是依赖于 some-dependency.js 的“主”JavaScript 文件

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.
    //Then your script is executed
});

GitHub 自述文件摘录：

RequireJS 加载纯 JavaScript 文件以及更多定义的模块。它针对浏览器内使用进行了优化，包括在 Web Worker 中使用，但它也可以在其他 JavaScript 环境中使用，例如 Rhino 和 Node。它实现了异步模块 API。

RequireJS 使用纯脚本标签来加载模块/文件，因此它应该允许轻松调试。它可以简单地用于加载现有的 JavaScript 文件，因此 您可以将它添加到现有项目中而无需重新编写 JavaScript 文件。

…

原文由 John Strickler 发布，翻译遵循 CC BY-SA 3.0 许可协议

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

ES6 模块

浏览器中的 ECMAScript 模块

浏览器中的动态导入

Node.js 需要

AJAX 加载

获取加载

jQuery 加载

动态脚本加载

检测脚本何时执行

源代码合并/预处理

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

Stack Overflow 翻译