在这里展示的大多数解决方案都意味着动态加载. 我正在寻找一个编译器,将所有依赖的文件集成到一个单一的输出文件. 相同的Less/Sass预处理器处理CSS @import在规则上. 因为我找不到任何值得这个类型的东西,我写了一个简单的工具解决问题。

因此,这里是编译器, https://github.com/dsheiko/jsic,它取代 $import(“文件路径”)与请求的文件内容安全。

主 / 主 / JS

var foo = $import("./Form/Input/Tel");

src / 表格 / 输入 / Tel.js

function() {
    return {
          prop: "",
          method: function(){}
    }
}

现在我们可以运行编辑器:

node jsic.js src/main.js build/mail.js

接收合并文件

主 / 主 / JS

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};

我基本上做如下,创建一个新的元素,并添加它来主导:

var x = document.createElement('script');
x.src = 'http://example.com/test.js';
document.getElementsByTagName("head")[0].appendChild(x);

在 jQuery 中:

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // Script is now loaded and executed.
    // Put your dependent JavaScript code here.
});

import "./path/to/js/file";

是的! OP 提出了一些类似于“@import in CSS”的要求,这正是这样。 它也不是像火箭科学复杂的一些旧方法一样。 至少毫无疑问是最初学友好的方法,但我确信非初学者也喜欢它。

要开始使用 Vite for a vanilla JavaScript 项目,只需安装 Node.js 和 [NPM3,然后做:

npm create vite@latest <your-vanilla-js-app-name> --template vanilla

是G:

npm create vite@latest my-js-app --template vanilla

正如一个侧面注意事项: 还有另一个可能在你的脑海中出现的问题是名称空间问题,例如,如果你在你所包含的文件中使用的名称类似于你已经在当前文件中的名称吗? 但这是JavaScript的性质,对吗? 这不是这个方法的具体问题。

下面是没有jQuery的同步版本:

function myRequire( url ) {
    var ajax = new XMLHttpRequest();
    ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
    ajax.onreadystatechange = function () {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4) {
            switch( ajax.status) {
                case 200:
                    eval.apply( window, [script] );
                    console.log("script loaded: ", url);
                    break;
                default:
                    console.log("ERROR: script not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

请注意,为了获得此工作跨域,服务器将需要在其响应中设置允许起源标题。

另一个方法是使用HTML进口,这些可以包含脚本参考以及风格表参考。

您可以将 HTML 文件链接到

<link rel="import" href="vendorScripts.html"/>

在 vendorScripts.html 文件中,您可以包含您的脚本参考,如:

<script src="scripts/vendors/jquery.js"></script>
<script src="scripts/vendors/bootstrap.js"></script>
<script src="scripts/vendors/angular.js"></script>
<script src="scripts/vendors/angular-route.js"></script>

查看 HTML Imports 更多详细信息。

不幸的是,它只在Chrome中工作。

最好使用 jQuery 方式. 要延迟已准备的事件,首先拨打 $.holdReady(真实)。

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});