2015-12-17 4 views
2

Я начинаю использовать JSPM в своих веб-проектах Aurelia, и я хочу знать, есть ли какие-либо последствия или преимущества при использовании import "<client side library>"?JSPM - Есть ли какие-либо преимущества/недостатки в том, что касается файлов библиотеки клиентской стороны, использующих импорт с использованием тега сценария?

Я видел код как и для клиентской части библиотеки классов внутри JS:

import "jquery"; 
import "bootstrap/css/bootstrap.css!" 
import "bootstrap"; 

export class App { 
    constructor { 

    } 
} 

Вопрос: Какова разница/преимущества/недостатки между импортом это таким образом, как противостоять традиционным включают в <script> и <link> теги в файле .html?

<html> 
<head> 
    <link rel="stylesheet" src="<bootstrap path>/bootstrap.css"> 
</head> 
<body> 

    <script type="text/javascript" src="<bootstrap path>/bootstrap.js"></script> 
</body> 
</html> 

Мой метод проб и ошибок показывает мне, что при использовании import в конкретном классе/файла расслоение плотной, она ограничивает библиотеки конкретного вида файла, как противостоять быть доступны по всему миру.

В конечном счете, когда вы идете построить этот проект для производства, разве эти библиотеки не должны существовать в index.html?

ответ

4

Мое мнение таково: вы должны использовать import ключевое слово, и вот почему:

  • вопрос стиля: это ES6 стиле, и Аурелия своего рода обязывает использовать его
  • Читаемость имеет значение: другие разработчики ожидали бы, что вы используете import, так что это может смутить их
  • Опять же, import позаботится об этом, поэтому, если вы просто добавите тег скрипта, вы можете добавить s ome import, а затем некоторые функции могут быть переоформлены.
  • красота: Я не думаю, что это очень красиво, чтобы иметь 100 <script> тегов в коде
  • пакетирования для производства. Собираетесь ли вы конкатрировать и угадать все это с помощью Grunt или Gulp? Если это так, это дополнительная работа, потому что в конфигурации по умолчанию она выходит из коробки. Если нет ... ну, нет, вы должны это сделать
  • Rollup. И здесь самая сладкая часть.

JSPM - это потрясающе! Это немного отличается от этого проекта, хотя - он сочетает в себе хранилище с менеджером пакетов и клиентским модулем загрузчиком, а не просто комплектом модулей. JSPM позволяет использовать любой формат модуля и даже разрабатывать без шага сборки, поэтому это отличный выбор для создания приложений. Накопитель генерирует пакеты меньшего размера , которые не используют сложный формат SystemJS, а также лучший выбор для создания библиотек . Будущая версия JSPM может использовать Rollup внутренне, поэтому вы получите лучшее из обоих миров.

Rollup является еще одним про для использования import.То, что он делает, это копирование библиотек, которые вы используете, и получение минимального количества кода, который вам нужен, поэтому, если вам нужны только некоторые вещи, скажем, jQuery, вам не нужно будет загружать ваши посетители 50KB (или сколько это стоит Теперь?).

Подробнее о Rollup here.

+0

Спасибо, что на самом деле много смысла, спасибо за объяснение. Я все еще немного смущен насчет части связки и красоты. В моем текущем рабочем процессе я uglify + concat все в 1 lib.css файл 1 app.css и 1 lib.js + 1 app.js. Таким образом, в Index будет всего 4 файла. Я посмотрю на Rollup, это выглядит многообещающим. – TheLazyChap

+0

@ TheLazyChap, может быть, вы найдете эту статью по интересному http://blog.durandal.io/2015/06/23/bundling-an-aurelia-application/ –

+2

Не забывайте, что импорт заботится о зависимостях. Если вы код импортируете модуль, который зависит от другого модуля, который зависит от другого модуля, а также от других и других, все зависимости загружаются в правильные другие, к моменту создания модуля зависимость зависит от памяти. Также процесс расслоения кода aurelia кода, который вы не используете и не связываете с модулями и зависимостями, которые вы используете для производительности во время исполнения. –