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

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





Вариант A



у меня есть некоторые файлы 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. Это выглядит так так, вероятно, должно быть сделано. Однако я не уверен, как это сделать, поскольку весь код webpack, похоже, скрыт за пакетом узла angular-cli-webpack. Я думал, может быть, есть еще одна конфигурация webpack, к которой у нас может быть доступ. Но я не уверен, так как я не видел его при создании нового проекта angular-cli-webpack.



Подробнее:



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



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

571   5  

5 ответов:

последний тест с использованием angular-cli 1.0.0 с Angular 4.0.0

это можно сделать с помощью 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 serve, если вы его запускаете,

..чтобы увидеть скрипты, выполняемые в **функции через .

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

79  
2018-02-02 19:58:28

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

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

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

  • создать на 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 и вы получаете преимущество сборки webpack (Минификация, Хэши,...).

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

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

6  
2018-01-15 16:35:38

вам нужно открыть файл .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":[]).

3  
2017-12-26 11:20:09

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

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

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

1  
2016-10-04 00:23:07

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

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

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

-2  
2016-08-09 19:51:00

Comments

    Ничего не найдено.
Click here to cancel reply.