Angular Cli Webpack, как добавить или связать внешние файлы js?

80

Я не уверен, как включить JS-файлы (поставщиков) после переключения Angular Cli с SystemJs на Webpack.

Например

Вариант А

У меня есть файлы js, которые были установлены через npm. Добавление тегов сценария к тегу заголовка таким образом не работает. И это не кажется лучшим способом.

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

Вариант Б

Включите эти файлы js как часть пакета webpack. Это похоже на то, как это, вероятно, должно быть сделано. Однако я не уверен, как это сделать, поскольку весь код webpack, кажется, скрыт за пакетом узла angular-cli-webpack. Я подумал, может быть, есть еще одна конфигурация веб-пакета, к которой у нас может быть доступ. Но я не уверен, поскольку я не видел его при создании нового проекта angular-cli-webpack.

Больше информации:

Файлы js, которые я пытаюсь включить, должны быть включены до проекта Angular. Например, jQuery и сторонняя библиотека js, которая на самом деле не настроена для загрузки модуля или машинописного текста.

Ссылки https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

javascript  angular  angular-cli 
— Крис Холленбек
источник
Кажется, они перешли на машинопись 2.0
— Натан Смит
— Натан Смит,
Спасибо за ссылку, но я не это ищу. Это для добавления файлов определений. Я пытаюсь понять, как правильно включить сторонние библиотеки JavaScript в мой проект.
— Крис Холленбек,
Пример Webpack angular2, как объединить разные для поставщика, один для полиморфизма, один для приложения и один для css, чтобы сохранить чистое приложение.
— Джоравар Сингх,

Ответы:

90

Последний раз тестировался с использованием angular-cli 7.xx с Angular 7.xx

Это можно сделать с помощью scripts:[]in .angular-cli.json.

{
  "project": {
    "version": "1.0.0",
    "name": "my-project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

Примечание. Как указано в документации при установке глобальной библиотеки: если вы измените значение своего styles(или scripts!) Свойства, то:

Перезапустите службу ng, если вы ее используете,

.. чтобы увидеть скрипты, выполняемые в ** глобальном контексте через scripts.bundle.jsфайл.

Примечание: как описано в комментариях ниже. Библиотеки JS, которые поддерживают модули UMD через импорт es6, такие как jQuery, также могут быть импортированы в ваши файлы машинописных текстов с использованием синтаксиса импорта es6. Например: import $ from 'jquery';.

— Крис Холленбек
источник
4
Как я могу ссылаться на jquery в Typescript после добавления скрипта в angular-cli.json?
— nthaxis 07
1
Кстати, если добавляемый внешний файл является полифилом, то для этого есть специальный механизм, хорошо описанный в src/polyfills.ts(по состоянию на бета-версию 31)
— rmag
3
Если вы используете jQuery в своем проекте Angular, значит, вы делаете это неправильно. Я люблю jQuery, я далеко продвинулся в карьере, но если вы правильно используете Angular, то в jQuery больше нет необходимости.
— Блэр Коннолли,
5
@BlairConnolly, я согласен, и мы хотели бы избавиться от jQuery. Мы используем пользовательский интерфейс JQuery от другой команды в нашей компании, у которой в данный момент нет времени на переписывание всего пользовательского интерфейса. Поэтому иногда у людей просто нет выбора.
— Крис Холленбек
1
Там что - то написано о том , что здесь , что предложить> После того, как вы импортировать библиотеку через массив сценариев, вы не должны импортировать его с помощью оператора импорта в коде машинопись (например , импорт * в $ от «JQuery»;)
— PaulCo
21

Есть небольшая разница в использовании scripts:[]и добавлении чего-либо в <head>with <script>. Скрипты из scripts:[]get добавляются в тот, scripts.bundle.jsкоторый всегда загружается в теге body и, таким образом, будет загружаться ПОСЛЕ скриптов в <head>. Таким образом, если порядок загрузки скриптов имеет значение (например, вам нужно загрузить глобальный полифилл), тогда ваш единственный вариант - вручную скопировать скрипты в папку (например, с помощью скрипта npm) и добавить эту папку как актив. в .angular-cli.json.

Поэтому, если вы действительно зависите от того, что что-то загружается до самого angular ( вариант A ), вам нужно вручную скопировать его в папку, которая будет включена в сборку angular, а затем вы можете загрузить это вручную с помощью<script> in <head>.

Таким образом, для достижения варианта а вам необходимо:

  • создать vendor папку вsrc/
  • добавить эту папку как актив в .angular-cli.json:
"assets": [
    "assets",
    "favicon.ico",
     "vendor"
  ]

  • скопируйте свой скрипт поставщика node_modules/some_package/somejs.jsвvendor

  • загрузить его вручную в index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

Однако в большинстве случаев вам нужен этот подход только для пакетов, которые должны быть доступны глобально, прежде всего (например, для определенных полифиллов). Ответ Криса верен для варианта B, и вы получаете преимущества сборки веб-пакета (минификация, хеши, ...).

Однако, если ваши скрипты не должны быть доступны глобально и если они готовы к работе с модулями, вы можете импортировать их src/polyfills.tsили, что еще лучше, импортировать только тогда, когда они вам нужны в ваших конкретных компонентах.

Предоставление глобального доступа к скриптам посредством scripts:[]их загрузки вручную или путем их загрузки создает собственный набор проблем, и на самом деле их следует использовать только тогда, когда это абсолютно необходимо.

— Кристиан Ульбрих
источник
Это замечательно, потому что я могу создавать файлы конфигурации js для каждой среды, оставлять их там и загружать во время выполнения вместо использования файлов environment.ts и необходимости создавать angular для каждой среды (ужасно ...)
— Эрик Филипс
У вас есть какой-нибудь пример использования полифилов или загрузки определенных компонентов?
— Стив Лам
@SteveLam Пожалуйста, уточните или задайте новый вопрос. Обычно полифиллы загружаются не в конкретный компонент, а глобально, если вы не хотите, чтобы ваши компоненты были самодостаточными, но даже в этом случае предпочтительнее определить среду выполнения, которую вы ожидаете, и позволить потребителю компонента решать, когда и как загружать полифилл.
— Кристиан Ульбрих
Спасибо, Крис, у вас есть статья об этом?
— Стив Лам
Привет, я использую angular 7, когда я запускаю приложение mi, скрипт загружается на страницу индекса, но мне нужно использовать скрипт на другой странице, когда я нажимаю на другой странице, скрипт выгружается, как я могу загрузить его на определенной странице или для всего приложения?
— Луис Альберто Хуарес
3

Вам нужно открыть файл .angular-cli.jsonи выполнить поиск, "scripts:"или, если вы хотите добавить внешний CSS, вам нужно найти слово"styles": в том же файле.

в качестве примера, показанного ниже, вы увидите, как bootstrap Js ( bootstrap.min.js) и bootstrap CSS ( bootstrap.min.css) включены в .angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Конечно, если у вас есть собственный файл js, вы можете добавить путь к нему здесь, в .angular-cli.jsonтом же месте (в "scripts":[]).

— Прашант Барве
источник
2

Возможно, вы захотите взглянуть на эту страницу: https://github.com/angular/angular-cli#global-library-installation

Он показывает основы того, как включать файлы .js и .css.

Некоторые библиотеки javascript необходимо добавить в глобальную область и загрузить, как если бы они были в теге сценария. Мы можем сделать это с помощью свойств apps [0] .scripts и apps [0] .styles файла angular-cli.json.

— Свенн
источник
7
Ссылка только ответы не приветствуются. Пожалуйста, процитируйте основные части ответа из справочной ссылки (-ов), так как ответ может стать недействительным, если связанные страницы (-ы) изменятся.
— Стюарт Сиглер
-1

Раньше я не использовал angular-cli, но сейчас работаю над сборкой Angular / Webpack. Для того , чтобы обеспечить мое приложение с JQuery и другими производителями я использую плагин WebPack, в ProvidePlugin(). Обычно это находится в вашем webpack.config.js: Вот пример библиотек jquery, lodash и moment. Вот ссылка на документацию (в лучшем случае расплывчатую)

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash',
    moment: 'moment',
  })
]

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

— зилдж
источник
1
Конфигурация angular cli webpack на самом деле является частью пакета angular cli node. К сожалению, я не могу это изменить. Например, в CLI есть предустановленные команды для сборки. ng buildэто все обрабатывается cli. Но я подумал, что, вероятно, есть способ добавить что-то как часть сборки. Но я не видел четкого примера.
— Крис Холленбек,
Мои извинения. Я отфильтровал угловые 2 вопроса, но этот ускользнул. Удачи.
— zilj 09
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.