Блог

Главная - Вопросы по программированию - Laravel: Какие пакеты npm должны быть в «зависимостях» против «devDependencies»?

Laravel: Какие пакеты npm должны быть в «зависимостях» против «devDependencies»?

#laravel #npm #dependencies #packages.json

#laravel #npm #зависимости #packages.json

Вопрос:

В Laravel 5.3 файл package.json выглядит следующим образом: все пакеты находятся в devDependencies. Кто-нибудь может сказать мне, какие пакеты также необходимы в производстве. Я думаю, что все, кроме browsersync.

package.json

 {
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "dropzone": "^4.3.0"
  }
}

Я думаю, что некоторые пакеты, такие как vue.js также необходимы в рабочем режиме, поэтому я бы переместил их в dependencies, а не в devDependencies.

Комментарии:

1. Непонятно, что вы пытаетесь сделать. Вы хотите использовать пакет laravel в своем приложении или вы хотите работать над самим пакетом? Также какую модульную систему вы используете для зависимостей (CommonJS, Bower, …)?

2. @BrunoRanschaert Я отредактировал свой пост

Ответ №1:

Все это есть, devDependencies если вы используете elixir :

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

Все другие библиотеки javascript npm могут быть скомпилированы с elixir , поэтому нет необходимости иметь их на рабочей машине. По умолчанию elixir используется webpack для компиляции resourcesassetsjsapp.js в publicjsapp.js , которые вам нужно включить на свои веб-страницы в качестве script .

Если вы посмотрите на: resourcesassetsjsbootstrap.js вы увидите пакеты, которые laravel добавляются по умолчанию (такие вещи, как vue , bootstrap и jQuery ), поэтому, если, например, вы хотите добавить dropzone в свой проект, вы просто добавляете его в bootstrap.js вот так:

require('dropzone');

Который теперь также будет компилироваться dropzone для publicjsapp.js создания dropzone a devDependency .

Комментарии:

1. большое вам спасибо за ваш ответ, теперь мне многое стало яснее 🙂 один дополнительный вопрос… как мне импортировать таблицы стилей из папки node_modules?

2. Для таблиц стилей, в @import которых вы просто используете resources/assets/sass/app.scss инструкцию, вы можете включить либо css , либо scss файлы (или папку), вам просто нужно указать весь путь от корня вашего проекта, например, для bootstrap, который у вас есть @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

3. хорошо, спасибо, что сработало… У меня возникла ошибка при размещении .css в конце пути

4. Предостережение: при использовании npm shrinkwrap для блокировки определенных версий пакетов (чтобы вы нажимали на то, над чем вы работали в dev), по умолчанию devDependencies они НЕ заблокированы. Для этого используйте npm shrinkwrap --dev .

Ответ №2:

Кроме того, в более новых версиях Laravel, которые используют Laravel Mix (который является оболочкой вокруг Webpack), все ваши зависимости могут находиться под devDependencies .

Webpack компилирует все вплоть до одного файла ( /js/app.js ) или нескольких файлов, если, например, вы используете extract метод для сборки ваших файлов ( /js/app.js , /js/app.js , /js/manifest.js ). И это единственные файлы, которые нужны вашему браузеру для выполнения вашего кода JavaScript; и для Webpack для их сборки достаточно найти все зависимости в devDependencies .

Комментарии:

1. Что, если мы не хотим устанавливать некоторые из них devDependencies в производственной среде? Конкретно, я не хочу использовать оба browser-sync ; browser-sync-webpack-plugin пакета в рабочей среде, потому что по крайней мере один из них устанавливает cookie, io который нежелателен для конечного пользователя, в соответствии с законом / духом GDPR.

2. Обратите также внимание, что вы, возможно, имеете в виду npm run prod , когда говорите «Webpack компилирует все в один файл (/js/app.js),»