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

花园里的小张

JavaScript 中有没有类似之处？@importCSS 的东西允许你在另一个 JavaScript 文件中包含一个 JavaScript 文件？
                                                               
4 m# J, y7 L, R0 {2 _; L( m    解决方案:                                                               
1 K. T! A5 z4 d! `4 L                                                                旧版本的 JavaScript 没有导入、包含或要求，所以开发了许多不同的方法来解决这个问题。
但从 2015年到 （ES6）开始，JavaScript 已经有了ES 模块标准为6 Node.js大多数现代浏览器也支持 中导入模块。
3 [* ~2 z3 F) ]- w为了与旧浏览器兼容，这种构建工具WebPack和汇总和/或transpilation可以使用巴贝尔等工具。
  `9 l. f. [& Y* n8 b! MES6 模块自 8.5 版以来，Node.js已支持ECMAScript (ES6) 模块，带有--experimental-modules标志，至少从 Node.js v13.8.0 起不带标志。ESM”（对Node.js的以往CommonJS风格模块系统CJS你要么用"type": "module"中package.json或者给文件的扩展名.mjs。（同样，.cjs若您的默认值为 ESM，使用 可以命名Node.js 以前的 CJS 模块编写的模块。
" D5 j/ J6 C! Z* X; q, i& Q9 J4 v  J使用package.json：
& f$ \: U6 V8 ?& K# B$ m# [8 F

{    "type": "module"}
/ }3 e: j. q& \( E, f& r% p3 ~

然后module.js：

export function hello() {  return "Hello";}
) q+ V: P6 c' V& n  q+ V

然后main.js：

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

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

export function hello() {  return "Hello";}
9 L9 t! G' T  J& M/ ^' Y- X, ^3 x, V

然后main.mjs：

import { hello } from './module.mjs';let val = hello()； / val is "Hello";
7 {9 h  f6 w3 q- j3 u9 p

在浏览器中ECMAScript 模块从Safari 10.1、Chrome 61、Firefox 60 和 Edge 从16 开始，浏览器支持直接加载 ECMAScript 模块(不需要像 Webpack 这样的工具)caniuse检查当前支持。不需要 Node.js 的.mjs扩展；浏览器完全忽略了模块/脚本上的文件扩展名。
1 r1 i, D6 ?% P# [' n( L. c' p

// hello.mjs -- or it could be simply `hello.js`export function hello(text) {  const div = document.createElement('div');  div.textContent = `Hello ${text}`;  document.body.appendChild(div);}
- A, w* n0 ]8 O; z+ @

浏览器中的动态导入动态导入允许脚本根据需要加载其他脚本：

; g2 Z+ M' G* B2 |% F
• [/code]Node.js 需要在 Node.js老  仍被广泛使用CJS 模块样式是module.exports/require系统。[code]// mymodule.jsmodule.exports = {   hello: function()(){       return "Hello";  }/ server.jsconst myModule = require('./mymodule');let val = myModule.hello()； // val is "Hello"   
  . p+ G4 [3 s; M5 J8 Y0 d3 h$ G. r: w

JavaScript 还有其他方法可以在不需要预处理的浏览器中包含外部 JavaScript 内容。
AJAX 加载可以用 AJAX 调用加载附加脚本，然后使用eval这是最直接的方法，但因为 JavaScript 沙箱安全模型，仅限于您的域。eval也为错误、黑客和安全问题打开了大门。
5 ?# J* L8 ]/ @& A. `6 W7 B1 c获取加载就像动态导入一样，你可以通过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)}`)})
: A! r. P2 ]4 y+ |% U

jQuery 加载在jQuery库在同一行提供加载功能：
% v- j$ u+ c3 p' n* @$ E

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

加载动态脚本你可以带脚本 URL  将脚本标记添加到 HTML 中。为避免 jQuery 费用，这是一个理想的解决方案。
脚本甚至可以停留在不同的服务器上。此外，浏览器将评估代码。标签可以注入或网页，或者只是在收盘前插入</strong>标签。
: I8 w& u, s2 Q3 e这是一个如何工作的例子：

function dynamicallyLoadScript(url)    var script = document.createElement(&quot;script&quot;);  // 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)}

此函数将在页面的 head 在部分末尾添加一个新标签，其中src 属性设置作为第一个参数提供给函数URL。
这两种解决方案都在JavaScript Madness: Dynamic Script Loading 讨论和解释。
检测脚本何时执行现在，有一个你必须知道的大问题。这意味着您远程加载代码。现代 Web 浏览器将加载文件并继续执行您当前的脚本，因为它们异步加载所有内容以提高性能。(适用于 jQuery 方法和手动动态脚本加载方法。
; a; e5 x9 y/ w4 d这意味着如果您直接使用这些技巧，您将无法在要求加载后的下一行使用新加载的代码，因为它仍然会加载。
! R/ l, X3 {0 F* C+ k- [例如：my_lovely_script.js包含MySuperObject：

var js = document.createElement(&quot;script&quot;);js.type = &quot;text/javascript&quot;;js.src = jsFilePath;document.body.appendChild(js);var s = new MySuperObject();Error : MySuperObject is undefined

然后单击重新加载页面F5。它有效！令人困惑…
3 T: h7 \6 j) U那该怎么办呢？
嗯，你可以用作者在我给你的链接中推荐的 hack。综上所述，对于匆忙的人来说，他在脚本加载时使用事件来运行回调函数。因此，您可以将所有使用远程库的代码放入回调函数中。

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);}
, x2 `1 O3 o4 a9 g* i2 d

然后写作要加载到脚本上lambda 函数后使用的代码：
; |* ]4 O+ T0 F4 q' W9 R

var myPrettyCode = function() {   / / Here,do whatever you want};
) n' B. w! w0 P/ F- T, ?

然后你操作所有这些:
; P8 r8 I' ]% ^3 f

loadScript(&quot;my_lovely_script.js&quot;,myPrettyCode);

请注意，脚本可能在 DOM 加载后或之前执行取决于浏览器以及您是否包含它script.async = false;.
合并/预处理源代码正如这个答案开头提到的，许多开发人员在他们的项目中使用建筑/转换工具，如 Parcel、Webpack 或 Babel，允许他们使用即将推出的 JavaScript 语法为旧浏览器提供向后兼容性、合并文件、缩小、执行代码拆分等。