如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中？ES6 模块节点.js需要AJAX Loading抓取加载j查询加载动态脚本加载检测脚本何时执行源代码合并/预处理

javascript file import include

2022-08-29 21:45:48

如何将一个 JavaScript 文件包含在另一个 JavaScript 文件中，类似于 CSS？@import

答案 1

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

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

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

ES6 模块

ECMAScript （ES6）模块在 Node.js 自 v8.5 起就带有标志，并且至少从 Node.js v13.8.0 开始没有标志。要启用“ESM”（与Node.js以前的CommonJS样式模块系统[“CJS”]），您可以在文件中使用或为文件提供扩展名。（同样，如果默认值为 ESM，则可以使用 Node.js 以前的 CJS 模块编写模块。--experimental-modules"type": "module"package.json.mjs.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";

使用，您将拥有：.mjsmodule.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);
}

在 https://jakearchibald.com/2017/es-modules-in-browsers/ 阅读更多内容

浏览器中的动态导入

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

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

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

节点.js需要

较旧的 CJS 模块样式，在 Node.js 中仍然广泛使用，是 module.export/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 Loading

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

抓取加载

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

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

j查询加载

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)
}

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

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

检测脚本何时执行

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

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

例如：包含：my_lovely_script.jsMySuperObject

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 加载之后或之前执行，具体取决于浏览器以及是否包含行。有一篇关于Javascript加载的很棒的文章，讨论了这个问题。script.async = false;

源代码合并/预处理

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

答案 2

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

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

例：

将依赖项定义为模块：

一些依赖性.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
});

实现.js是你的“主要”JavaScript文件，依赖于某种依赖关系.js

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文件。

...