Nano Hash - криптовалюты, майнинг, программирование

Как использовать загрузку через NPM в Meteor 1.3?

Насколько я понимаю, Meteor 1.3 отдает предпочтение пакетам npm, а не пакетам Meteor/атмосферы.

Я попытался добавить Bootstrap в свой проект через meteor npm install bootstrap. Затем я добавил пару div с классами row и col-md-3, чтобы проверить, работает ли он, и я не увидел того, что ожидал (я не увидел разметку сетки). Я создал эти div внутри тега body, который объявлен в файле с именем ./imports/ui/body.html. Возможно, мне не хватает import {Bootstrap} from 'meteor/bootstrap', import {bootstrap} from 'bootstrap' (что я пробовал, но безуспешно) или подобных, или import '../../node_modules/bootstrap/somefile'.

Я попробовал meteor add twbs:bootstrap, и приложение заработало, как и ожидалось (правильный макет сетки для тех col-md-3).

В этой теме рекомендуется использовать NPM. Может быть, я пропустил что-то важное, чтобы заставить его работать через NPM с метеором 1.3?

В моем HTML-коде нет ничего особенного (и он работал при добавлении пакета метеора twbs:bootstrap). Единственная странность заключается в том, что код HTML находится в файле в каталоге imports/, так что, возможно, я пропустил что-то важное в процессе загрузки< /а>.

Редактирует после просмотра ответов @loger9 и @benjaminos.

Я сделал meteor npm install --save bootstrap и получил новый каталог node_modules. На всякий случай я снова запускаю npm install и meteor, чтобы заставить любые процессы выполняться при запуске. body.html и body.js находятся в imports/ui. body.html — это

<body>
  <div class="container page-wrap">

    <div class="page-header">
      <h1>A title</h1>
    </div>

    <div class="row">
      <div class="col-md-3" style="background: red;">
        Lorem Ipsum
      </div>

      <div class="col-md-3" style="background: lavenderblush;">
        Lorem Ipsum
      </div>
    </div>
  </div>

</body>

и body.js включает

import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';

import './body.html';

Но он жалуется, что не может найти модуль ../../node_modules/bootstrap/dist/css/bootstrap.min.css (если я перехожу к каталогу imports/ui и оттуда я выбираю ../../node_modules/bootstrap/dist/css/bootstrap.min.css, я вижу файл, поэтому это не похоже на проблему с неверным путем) и ничего не отображает.

Добавление import bootstrap from 'bootstrap', кажется, не имеет никакого эффекта. client/main.js также import '../imports/ui/body.js';

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

npm twitter-bootstrap meteor
12.04.2016

  • На самом деле, у меня нет проблем с импортом, если у меня есть CSS в каталоге /import. Кажется, что /node_modules недоступен для меня через import ...; 14.04.2016
  • Кроме того, я только что нашел и решил поиграть с этим руководством. и простое выполнение meteor npm install bootstrap4-webpack-package --save и добавление import 'bootstrap4-webpack-package'; в client/main.js заставит его работать. Я не знаю, где я свернул не туда с моим другим проектом. 14.04.2016

Ответы:


1

Я нашел решение в этом запись в блоге Серджио Тапиа. Он работает на Meteor 1.3.2.2 или выше. Вот шаги, которые сработали для меня (с поддержкой SASS/SCSS):

Установка

meteor add fourseven:scss
meteor npm install bootstrap-sass --save

Импортируйте в свой код

  • client/main.scss (обратите внимание на расширение .scss):

    @import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

  • client/main.js:

    import 'bootstrap-sass';

Обходной путь для глификонов

Единственное решение, которое я нашел для шрифта Glyphicons, заключалось в том, чтобы скопировать папку шрифтов в public/:

cp -avr node_modules/bootstrap-sass/assets/fonts public/

Обратите внимание, как он загружается в Meteor (/fonts/bootstrap, т.е. он должен быть в общей папке):

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("/fonts/bootstrap/glyphicons-halflings-regular.eot?") format("embedded-opentype"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("/fonts/bootstrap/glyphicons-halflings-regular.svg") format("svg");
}

Необязательный шаг: автопрефиксер

Согласно fourseven:scss, автопрефиксер желательно устанавливать как отдельный плагин:

# optional
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer
19.05.2016
  • Спасибо. Мне нужно будет найти время, чтобы проверить это. Я давно решил использовать пакет meteor вместо npm, но это полезная информация для дальнейшего использования. Я проголосую, когда у меня будет время, чтобы проверить это. Спасибо еще раз. 20.05.2016
  • Ссылка выше не работает, обновленное сообщение в блоге находится здесь: sergiotapia.me/meteor/bootstrap/npm/2016/06/13/ 16.06.2016
  • установите $icon-font-path перед импортом _bootstrap.scss, кажется, делает работу... $icon-font-path: '/node_modules/bootstrap-sass/assets/fonts/bootstrap/' !default; 11.09.2016

    • 2

    Сначала вам нужно установить загрузчик через npm:

    meteor npm install --save bootstrap или то же самое с bootstrap-sass, если вам нужна версия sass (мой личный выбор).

    Если вы установили стандартную версию

    Вы должны импортировать файл CSS из пакета, например, в свой файл imports/startup/client/index.js, чтобы убедиться, что он будет загружен при запуске клиента.

    Если вы установили «bootstrap-sass»

    Вы можете просто создать файл «main.scss» и указать boostrap.scss в пакете (он должен находиться в «/node_modules/bootstrap-sass/assets/stylesheets/bootstrap.scss»).

    Так это будет выглядеть так.

    клиент/main.scss

    @import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    Это добавило преимуществ. Вы можете продолжать накапливать scss из любого места в этом файле и контролировать порядок загрузки css. Например, вы можете создать каталог sass в импорте, создать файл index.sass, а затем добавить его в main.scss. На мой взгляд очень аккуратно.

    Как же тогда загрузить JS?

    import bootstrap from 'bootstrap' or import bootstrap from 'bootstrap-sass'

    Вот как вы импортируете пакеты npm.

    РЕДАКТИРОВАТЬ: Очевидно, это работало не у всех, но в Meteor 1.3.2.2 они, кажется, исправили это. Теперь вы можете (действительно) импортировать файлы sass и less из пакетов npm.

    @import '{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';

    Импорт его таким образом должен помочь сейчас.

    13.04.2016
  • +1. Я знаю, что это должно быть так, но я не мог заставить его работать. Я отредактировал свой вопрос, чтобы предоставить более подробную информацию и показать код. Может я что-то еще где-то пропустил... 14.04.2016
  • Я видел ваш комментарий, где вы использовали boostrap4-webpack-package, но пока не могу ответить (недостаточно представителей). Это на самом деле довольно аккуратно. Этот пакет создан с помощью Webpack, который добавляет html и css в файл js, так что Meteor загружает его, как и любой другой пакет, поэтому в некотором смысле это обман. Официальный пакет просто не делает этого, вам нужно импортировать любой html или css вручную. Я знаю, это отстой :/. 15.04.2016
  • Вы должны проверить, куда вы импортируете CSS, вы импортируете CSS в JS, это в client/? Импорт не загружает CSS или HTML, только JS, например bootstrap.js, что дает вам глобальную переменную bootstrap. РЕДАКТИРОВАТЬ: я видел, что вы пытаетесь использовать это в ../import/ui/body.js, вы можете попробовать импортировать в него client/main.js, так как он все равно будет загружаться всегда. 15.04.2016
  • Спасибо, но удачи. Я только что создал новый проект метеора, запустил команду meteor npm install --save bootstrap, переключил html тела на то, что можно увидеть в моем вопросе, и попробовал import bootstrap from 'bootstrap' @/client/main.js и import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; из одного и того же места. Я не вижу правильного макета сетки. Первый импорт, кажется, не имеет никакого эффекта. Для второго я не могу найти модуль. Я не понимаю, что я делаю неправильно. Это должно быть так же просто, как ABC. 15.04.2016
  • По умолчанию Meteor не импортирует файлы scss. Для этого вам нужно установить пакет. meteor install fourseven:scss например, заставит работать пример scss из этого ответа. 17.12.2017
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..