Как развернуть веб-сайты, которые содержат npm-загруженные пакеты, для surge / gh-страниц? - PullRequest
Новая
       68

Как развернуть веб-сайты, которые содержат npm-загруженные пакеты, для surge / gh-страниц?

0 голосов
/ 02 июля 2019

Я новичок в части развертывания веб-сайтов с пакетами npm.и я пытаюсь временно разместить мой сайт на surge.sh , чтобы поделиться им и протестировать его.Это простой HTML-сайт со скриптами paper.js.Просто запустив index.html в chrome, он работает.При развертывании с расширением я получаю эту ошибку: 

Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught ReferenceError: paper is not defined
at HTMLDocument.<anonymous> (leaf_generator.js:2)

Нужно ли выполнить дополнительное действие при развертывании сайтов с пакетами узлов (в моем случае paper.js)?Например, сначала создать сайт, например, для реагирующих приложений?Или это проблема с тем, как я использую paper.js в скрипте?

Вот немного моего кода: 

// package.json
{
  "name": "leaf_generator",
  "version": "1.0.0",
  "description": "testing paperjs",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mark tension",
  "license": "ISC",
  "dependencies": {
    "focus-visible": "^4.1.5",
    "mathjs": "^6.0.2",
    "p5": "^0.8.0",
    "paper": "^0.12.1",
    "underscore": "^1.9.1"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}

Из index.html я импортирую paper.js иМой скрипт paper.js выглядит так: 

  <script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
  <script type="text/javascript" src="js/leaf_generator.js"></script>

И это первые строки бумажного скрипта .js, из которого выдается ошибка: 

$(document).ready(function() {
  paper.setup("myCanvas");
  with (paper) {
  """"""""" paper.js code """"""""""""
}

Спасибо!

1 Ответ

1 голос
/ 06 июля 2019

Быстрый ответ таков: Surge.sh игнорирует каталог node_modules по умолчанию .Если node_modules находится в вашем .gitignore файле (как и должно быть), они также не будут доступны на страницах GitHub.Вы правы, поскольку, как правило, инструмент сборки или генератор статических сайтов возьмут все ваши зависимости и объединят их в файлы сборки.

Основываясь на комментариях, есть несколько вариантов того, как можно быстро решить вашу проблему:

Вариант 1: пока используйте службу unpkg для ваших зависимостей npm

Один из вариантов - использовать что-то вроде Unpackage, что даст вам предварительно собранную и размещенную версию ваших зависимостей, напрямуюиз npm: 

<script type="text/javascript" src="https://unpkg.com/paper@0.12.3/dist/paper-full.js"></script>

Я предпочитаю ссылаться на определенную версию, но у вас также есть возможность всегда использовать последнюю версию из npm, ссылаясь на https://unpkg.com/paper

Вариант 2: Не игнорируйте папку node_modules в Surge

Кроме того, вы можете опубликовать папку node_modules в Surge, добавив файл игнорирования Surge и восстановив эту папку: https://surge.sh/help/ignoring-files-and-directories

Внутрипапку, которую вы развертываете, создайте заливку с именем .surgeignore и добавьте: 

!node_modules/

Вариант 3. Настройка инструмента сборки

Как указано вКроме того, вы можете настроить Webpack или аналогичный инструмент для упаковки Paper.js и другого вашего JavaScript вместе, но это может быть больше, чем вам нужно беспокоиться в зависимости от того, где вы находитесь с вашим проектом.

...