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

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

Например,

Вариант А

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

<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>

Вариант B

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

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

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

Ответы

Ответ 1

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

Это можно сделать, используя 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';.

Ответ 2

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

Таким образом, если вы действительно зависите от того, что загружается до самого угла (вариант A), то вам нужно скопировать его вручную в папку, которая будет включена в сборку углов, а затем вы можете загрузить это вручную <script> в <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, и вы получаете преимущества от сборки веб-пакета (Minification, Hashes,...).

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

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

Ответ 3

С Typescript 2.0, похоже, какая-то конфигурация по соглашению, где она автоматически связывает jQuery с конструкцией Angular2, не указывая явно, если вы npm устанавливаете @types/jquery и jquery и ссылаетесь на импорт.

ng new testapp
cd testapp
npm install --save-dev [email protected]
npm install --save @types/jquery
npm install --save jquery

Затем добавьте код ниже в app.component.ts

import { Component } from '@angular/core';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  public test(){
    jQuery('h1').text('Magic');
  }
}

Добавьте html ниже app.component.html

<h1 (click)="test()">
  {{title}}
</h1>

Затем запустите его

ng serve

Изменить:

Правильным способом сделать это будет редактирование angular-cli.json, как указано в других сообщениях. Это сообщение было до того, как эти параметры конфигурации были добавлены в версию webpack angular -cli

Ответ 4

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

в качестве примера, показанного ниже, вы увидите, как загрузочный 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":[]).

Ответ 5

Вы можете посмотреть эту страницу: https://github.com/angular/angular-cli#global-library-installation

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

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

Ответ 6

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

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

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