JavaScript 中有没有类似于@importCSS 的东西，允许你在另一个 JavaScript 文件中包含一个 JavaScript 文件？
如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？
IT技术
javascript
file
import
include
2020-12-25 22:53:01
6个回答
旧版本的 JavaScript 没有导入、包含或要求，因此已经开发了许多不同的方法来解决这个问题。
但是从 2015 年（ES6）开始，JavaScript 已经有了ES6 module标准来在 Node.js 中导入module，大多数现代浏览器也支持。
为了与旧浏览器的兼容性，这样的构建工具的WebPack和汇总和/或transpilation工具，如巴贝尔都可以使用。
ES6 module
自 v8.5 以来，Node.js 中已支持ECMAScript (ES6) module，带有--experimental-modules标志，并且至少 Node.js v13.8.0 没有标志。要启用“ESM”（相对于 Node.js 以前的 CommonJS 样式module系统 [“CJS”]），您可以"type": "module"在package.json文件中使用或为文件提供扩展名.mjs. （同样，.cjs如果您的默认值为 ESM，则可以命名使用 Node.js 以前的 CJS module编写的module。）
使用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 module
从Safari 10.1、Chrome 61、Firefox 60 和 Edge 16 开始，浏览器支持直接加载 ECMAScript module（不需要像 Webpack 这样的工具）。在caniuse检查当前支持。不需要使用 Node.js 的.mjs扩展；浏览器完全忽略module/脚本上的文件扩展名。
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// 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);
}
在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阅读更多
Node.js 需要
在 Node.js 中仍然广泛使用的较旧的 CJS module样式是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 加载
$.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>在页面的 head 部分的末尾添加一个新标记，其中该src属性设置为作为第一个参数提供给该函数的 URL。
这两种解决方案都在JavaScript Madness: Dynamic Script Loading 中进行了讨论和说明。
检测脚本何时执行
现在，有一个你必须知道的大问题。这样做意味着您远程加载代码。现代 Web 浏览器将加载文件并继续执行您当前的脚本，因为它们异步加载所有内容以提高性能。（这适用于 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。它有效！令人困惑...
那么该怎么办呢？
好吧，您可以使用作者在我给您的链接中建议的 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);
}
然后编写要在脚本加载到lambda 函数后使用的代码：
var myPrettyCode = function() {
// Here, do whatever you want
};
然后你运行所有这些：
loadScript("my_lovely_script.js", myPrettyCode);
请注意，脚本可能会在 DOM 加载之后或之前执行，具体取决于浏览器以及您是否包含了script.async = false;. 有一篇关于 Javascript 加载的很棒的文章讨论了这一点。
源代码合并/预处理
正如本答案开头提到的，许多开发人员在他们的项目中使用构建/转换工具，如 Parcel、Webpack 或 Babel，允许他们使用即将推出的 JavaScript 语法，为旧浏览器提供向后兼容性，合并文件，缩小，执行代码拆分等。
如果有人正在寻找更高级的东西，请尝试RequireJS。您将获得额外的好处，例如依赖项管理、更好的并发性和避免重复（即多次检索脚本）。
您可以在“module”中编写 JavaScript 文件，然后在其他脚本中将它们作为依赖项引用。或者，您可以将 RequireJS 用作简单的“获取此脚本”解决方案。
例子：
将依赖项定义为module：
some-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 README：
RequireJS 加载纯 JavaScript 文件以及更多定义的module。它针对浏览器中的使用进行了优化，包括在 Web Worker 中，但它也可以在其他 JavaScript 环境中使用，如 Rhino 和 Node.js。它实现了异步module API。
RequireJS 使用纯脚本标签来加载module/文件，因此它应该允许轻松调试。它可以简单地用于加载现有的 JavaScript 文件，因此您可以将其添加到您现有的项目中，而无需重新编写您的 JavaScript 文件。
...
实际上有一种非异步加载 JavaScript 文件的方法，因此您可以在加载后立即使用新加载文件中包含的函数，我认为它适用于所有浏览器。
您需要jQuery.append()在<head>页面元素上使用，即：
$("head").append($("<script></script>").attr("src", url));
/* Note that following line of code is incorrect because it doesn't escape the
* HTML attribute src correctly and will fail if `url` contains special characters:
* $("head").append('<script src="' + url + '"></script>');
*/
但是，这种方法也有一个问题：如果导入的 JavaScript 文件出错，Firebug（还有 Firefox 错误控制台和Chrome 开发者工具）会报错，如果用 Firebug 跟踪，这是个大问题JavaScript 错误很多（我这样做）。由于某种原因，Firebug 根本不知道新加载的文件，因此如果该文件中发生错误，它会报告它发生在您的主HTML文件中，您将很难找出错误的真正原因。
但如果这对您来说不是问题，那么这种方法应该有效。
我实际上编写了一个名为$.import_js()的 jQuery 插件，它使用了这种方法：
(function($)
{
/*
* $.import_js() helper (for JavaScript importing within JavaScript code).
*/
var import_js_imported = [];
$.extend(true,
{
import_js : function(script)
{
var found = false;
for (var i = 0; i < import_js_imported.length; i++)
if (import_js_imported[i] == script) {
found = true;
break;
}
if (found == false) {
$("head").append($('<script></script').attr('src', script));
import_js_imported.push(script);
}
}
});
})(jQuery);
因此，导入 JavaScript 所需要做的就是：
$.import_js('/path_to_project/scripts/somefunctions.js');
我还在Example 中为此做了一个简单的测试。
它包括一个main.js主HTML文件，然后在脚本中main.js使用$.import_js()导入称为一个附加文件included.js，它定义了这个功能：
function hello()
{
alert("Hello world!");
}
在 include 之后included.js，该hello()函数被调用，你会收到警报。
（此答案是对 e-satis 评论的回应）。
在我看来，另一种更简洁的方法是发出同步 Ajax 请求，而不是使用<script>标记。这也是Node.js处理包含的方式。
下面是一个使用 jQuery 的例子：
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
然后你可以在你的代码中使用它，因为你通常会使用一个包含：
require("/scripts/subscript.js");
并且能够从下一行的所需脚本中调用函数：
subscript.doSomethingCool();
可以动态生成 JavaScript 标记并将其从其他 JavaScript 代码中附加到 HTML 文档中。这将加载目标 JavaScript 文件。
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");