Аналог @import в JavaScript

Вопрос Как нужно подгружать все задействованные библиотеки JavaScript из одного файла, как это есть в CSS?

В CSS с недавних пор появился @import, который позволяет контролировать подгруздку стилей из одного файла, что очень удобно.

У конечного продукта нет доступа в сеть, поэтому нужные зависимости собираются вместе.

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  </head>

  <body>

    <!-- остальные преформы -->

  </body>
</html>

Структура проекта довольно простая:

.
├── static
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── datatables.min.css
│   │   └── main.css
│   ├── font
│   ├── img
│   └── js
│       └── main.js
└── templates

static/css/main.css

@import 'bootstrap.min.css'
@import 'datatables.min.css'

/* подгонка стилей под проект */

Ссылки


Ответы (1 шт):

Автор решения: qwabra

Импорт всех umd библиотек в одном js файле.

css

  @import 'bootstrap.min.css'
  @import 'datatables.min.css'

js

// umdLibLoader.js
import './A.js'
import './B.js'

демо.

<script type="module"> // umdLibLoader.js
  import 'https://unpkg.com/jquery'
  import 'https://unpkg.com/underscore'
  import 'https://unpkg.com/backbone'
  import 'https://unpkg.com/d3'

  // import './index.js'
</script>

<script type="module"> // index.js
  [
    '$', '_', 'Backbone', 'd3',
  ].forEach(q => console.log(!!window[q], q));
</script>

→ Ссылка