JavaScript中是否有类似于@importCSS的东西，允许您在另一个JavaScript文件中包含一个JavaScript文件？
如何在另一个JavaScript文件中包含一个JavaScript文件？
第141篇《如何在另一个JavaScript文件中包含一个JavaScript文件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
用现代语言检查脚本是否已经加载，它将是：
function loadJs(url){
return new Promise( (resolve, reject) => {
if (document.querySelector(`head > script[src="${src}"]`) !== null) return resolve()
const script = document.createElement("script")
script.src = url
script.onload = resolve
script.onerror = reject
document.head.appendChild(script)
});
}用法（异步/等待）：
try { await loadJs("https://.../script.js") }
catch(error) {console.log(error)}要么
await loadJs("https://.../script.js").catch(err => {})用法（承诺）：
loadJs("https://.../script.js").then(res => {}).catch(err => {})var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);如果您使用的是Web Workers，并且希望在worker的范围内包括其他脚本，则有关将脚本添加到head标记等的其他答案将对您不起作用。
幸运的是，Web Workers具有自己的importScripts功能，这是Web Workers范围内的全局功能，它是浏览器本身的固有功能，因为它是规范的一部分。
另外，作为对您问题的第二高投票答案，RequireJS还可以处理Web Worker内的脚本（可能会importScripts自称，但还有一些其他有用的功能）。
应该这样做：
xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);如果要加载JavaScript文件的目的是使用导入/包含的文件中的函数，则还可以定义一个全局对象并将这些函数设置为对象项。例如：
global.js
A = {};file1.js
A.func1 = function() {
console.log("func1");
}file2.js
A.func2 = function() {
console.log("func2");
}main.js
A.func1();
A.func2();在HTML文件中包含脚本时，只需要小心即可。顺序应如下所示：
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>此处显示的大多数解决方案都暗含动态载荷。我正在搜索的是一个将所有依赖文件组装成一个输出文件的编译器。与Less / Sass预处理器处理CSS @import规则相同。由于我没有找到任何像样的东西，因此我编写了一个简单的工具来解决该问题。
这就是编译器https://github.com/dsheiko/jsic，它可以$import("file-path")安全地替换为请求的文件内容。这是对应的Grunt插件：https : //github.com/dsheiko/grunt-jsic。
在jQuery master分支上，它们仅将原子源文件连接成一个以开头intro.js和以结束的单个源文件outtro.js。那不适合我，因为它在源代码设计上没有灵活性。查看jsic的工作方式：
src / main.js
var foo = $import("./Form/Input/Tel");src /表格/输入/Tel.js
function() {
return {
prop: "",
method: function(){}
}
}现在我们可以运行编译器：
node jsic.js src/main.js build/mail.js并获得合并的文件
build / main.js
var foo = function() {
return {
prop: "",
method: function(){}
}
};语句import在ECMAScript 6中。
句法
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;可以动态生成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");我认为更简洁的另一种方法是发出同步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);
}
});
}然后，您可以像通常使用include那样在代码中使用它：
require("/scripts/subscript.js");并能够在下一行中从所需脚本中调用函数：
subscript.doSomethingCool(); 相似问题
问题类别
@import可以使用Mixture之类的工具通过其特殊.mix文件类型来实现类似CSS的JavaScript导入的语法（请参见此处）。我想该应用程序只是内部使用一种上述方法，尽管我不知道。从文件的Mixture文档中
.mix：这是一个
.mix将多个.js文件合并为一个的示例文件：Mixture将其输出为
scripts-global.js，也将其输出为缩小版本（scripts-global.min.js）。注意：除了将它用作前端开发工具之外，我与Mixture无关。在看到一个运行中的
.mixJavaScript文件（在其中一个Mixture样板中）并对它有点困惑时，我遇到了这个问题（“我能想到吗？”）然后我意识到这是一种特定于应用程序的文件类型（有些令人失望，同意）。但是，认为这些知识可能对其他人有所帮助。更新：混合物现在免费（脱机）。
更新：混合物现已停产。旧的混合物版本仍然可用