从.mix 文件中的混合文档:

混合文件只是.js 或.css 文件与.mix. 在文件名中. 混合文件只是扩展正常风格或脚本文件的功能,并允许您进口和结合。

以下是一個.mix 檔案的例子,將多個.js 檔案組成一個:

// scripts-global.mix.js
// Plugins - Global

@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";

混合输出这个作为脚本-global.js 以及作为一个小型版本(脚本-global.min.js)。

注意:我不以任何方式与混合,除了使用它作为一个前端开发工具. 我遇到了这个问题,看到一个混合JavaScript文件在行动(在一个混合板)并有点混淆它(“你可以这样做吗?”我认为自己)。 然后我意识到这是一个应用程序特定的文件类型(有些令人失望,同意)。

您只能使用要求();标签。

例如,如果我有一个 addition.js 模块,我想添加到 math.js,我会这样做:

//this is math.js

//vars
let a = 1;
let b = 3;

//start of code
const additionfile = require('addition.js');
window.alert("You added " + a + " and " + b + " together, to get " + additionfile.add(a,b) + "!");

如果你想要添加.js 文件,它会看起来像这样的东西

function add(a,b) {
   const sum = a + b;
   return sum;
}

如果你想要一个单一的链接到所有的JavaScript功能,它们位于不同的文件,你可以做这样的事情,使用PHP:

创建一个 php 文件,将存储所有的 javascript 功能/triggers javascript.php 并确保它是一个.php 文件:

在你的“头”部分

 <script src="/directory/javascript.php"></script>

在您的 javascript.php 中,创建一个包含内容类型的应用程序/javascript 标题,并使用 php glob 包含所有 javascript 文件/脚本如下:

饰 JavaScript.php

<?php 
header("content-type:application/javascript");
foreach(glob("/functions/*.js") as $filename){include($filename);}
?> 

现在,你可以创建单独的JavaScript文件并将其添加到你的 / 功能文件夹,或者你可以称之为什么。

这里是一个基本插件,允许您使用 @import “path/to/file.js”; syntax 在任何文件中,包括JavaScript文件。

它可以通过 npm 安装安装: https://npmjs.org/package/grunt-import

我的总体解决方案来自EdgeS的effect.js.st图书馆(我写的)。

无情的插件警报 - 我在其他 stackexchange 网络网站上. 这是一个链接到 https://codereview.stackexchange.com/questions/263764/dynamic-load-css-or-script。

您将使用什么代码或设计来支持CSS和脚本的动态加载?

要求

支持承诺-等待-async 包括错误操作支持负载一次加密,包括重新加载支持负载在头部,身体,或当前的脚本元素支持负载 css,js,mjs 模块或其他脚本类型的支持其他标签特,如 nonce,crossorigin 等

static loadScriptOrStyle(url, options) {
  // provenance :<# **Smallscript EdgeS efekt** `efekt.js.st` github libraries #>
  // returns    :<Promise#onload;onerror>
  // options    :<# `fIgnoreCache`, `fAppendToHead`, `fUrlIsStyle`, `attrs:{}` #>
  const head = document.head; let node = options?.fAppendToBody ? document.body : head;
  const url_loader_cache = document.head.url_loader_cache
    ? head.url_loader_cache
    : (head.url_loader_cache = {script:{},link:{}})
  const kind = (options?.fUrlIsStyle || /\.css(?:(?:\?|#).*)?$/i.test(url))
    ? 'link' : 'script';
  // check already-loaded cache
  if(url_loader_cache[kind][url]) {
    const el = url_loader_cache[kind][url];
    // support `fIgnoreCache` reload-option; should not use on `head`
    if(options?.fIgnoreCache)
      el.remove();
    else
      return(new CustomEvent('cache',{detail:el}));
  }
  // (re)create and record it
  const self = document.currentScript;
  const el = url_loader_cache[kind][url] = document.createElement(kind);
  const append = (!self || options?.fAppendToHead || options?.fAppendToBody)
    ? el => node.appendChild(el)
    : el => self.parentNode.insertBefore(el, self);
  const load = new Promise((resolve, reject) => {
    el.onload  = e => {e.detail = el;resolve(e)};
    el.onerror = e => {e.detail = el;reject(e)};
    // `onload` or `onerror` possibly alter `cache` value
    // throw(new URIError(`The ${url} didn't load correctly.`))
  });
  // configure `module` attr, as appropriate
  if(/\.mjs(?:(?:\?|#).*)?$/i.test(url))
    el.type = 'module'
  // configure other attrs as appropriate (referrer, nonce, etc)
  for(const key in options?.attrs) {el[key] = attrs[key]}
  // trigger it
  if(kind === 'link') el.rel = 'stylesheet', el.href = url; else el.src = url;
  append(el);
  return(load);
}

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的性质,对吗? 这不是这个方法的具体问题。