Angular Cli Webpack, Як додати або об’єднати зовнішні файли js?

80

Я не впевнений, як включити файли JS (постачальників) після перемикання Angular Cli з SystemJ на 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 третьої сторони.
— Kris Hollenbeck,
Приклад Webpack angular2, як поєднати інший для постачальника, один для поліморфізму, один для програми та один для css, щоб підтримувати чистоту програми.
— Джоравар Сінгх

Відповіді:

90

Востаннє тестували за допомогою angular-cli 7.xx та Angular 7.xx

Це може бути досягнуто з використанням scripts:[]в .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!) Властивості, тоді:

Перезапустіть сервіс, якщо ви його запускаєте,

..бачити сценарії, що виконуються у ** глобальному контексті через scripts.bundle.jsфайл.

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

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

Існує незначна різниця у використанні, scripts:[]а потім у додаванні чогось до за <head>допомогою <script>. Скрипти з scripts:[]додаються до того, scripts.bundle.jsякий завжди завантажується в тег body і, отже, буде завантажений ПІСЛЯ сценаріїв у <head>. Таким чином , якщо порядок має значення завантаження сценарію (тобто вам необхідно завантажити глобальний polyfill), то єдиним варіантом є вручну скопіювати скрипти в папку (наприклад , за допомогою 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 і
— Ерік Філіпс
Чи є у вас якийсь приклад використання поліфайлерів або завантаження в конкретні компоненти?
— Steve Lam
@SteveLam Будьте конкретнішими або задайте нове запитання. Зазвичай полізаповнення не завантажуються в певний компонент, але глобально, якщо ви не хочете, щоб компоненти були автономними, але навіть тоді переважно визначати середовище виконання, яке ви очікуєте, і нехай споживач компонента вирішує, коли і як завантажувати поліфіль.
— Крістіан Ульбріх
Дякую Крісе, у вас є якась стаття про це?
— Steve Lam
Привіт, я використовую 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 потрібно додати до глобальної області дії та завантажувати так, ніби вони перебувають у тезі сценарію. Ми можемо зробити це за допомогою властивостей програми [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.

— zilj
джерело
1
Конфігурація веб-пакета angular cli насправді є частиною пакету вугільних cli-вузлів. Тому, на жаль, я не можу змінити це. Наприклад, в CLI є попередньо встановлені команди для побудови. ng buildцим усім займається cli. Але я думав, що, мабуть, є спосіб додати речі як частину збірки. Але я не бачив жодного яскравого прикладу.
— Kris Hollenbeck
Ах, вибачення. Я відфільтрував кутові 2 запитання, але це проскочило. Удачі.
— zilj
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.