Блог

У меня есть библиотека, которая экспортирует набор веб-компонентов. Пакет создается с использованием свертки, и все экспортируемые файлы на месте, например.:
export { Input, Button }; где Input и Button — классы es6, определенные ранее в пакете.
Я опубликовал его как пакет npm в частном репозитории npm и теперь пытаюсь импортировать его в другое приложение angular
import { Input, Button } from '../../node_modules/@company/web-components';

Я также пытался импортировать их как import '../../node_modules/@company/web-components';

Но webpack, похоже, изменяет этот импорт, поскольку не видит, где он используется. Интересная вещь, однако, заключается в том, что при экспорте библиотеки как iife webpack не преобразует ее в дерево.

Есть ли способ указать веб-пакету angular включить конкретный импорт, независимо от того, упоминается ли он в коде или нет?

По-видимому, есть способ включить модуль es6 из node_modules , добавив следующую строку в angular.json :

 {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "release.js",
                "input": "./node_modules/@company/web-components/dist/",
                "output": "."
              }
            ],
  

И затем мы можем включить его в index.html с помощью обычного импорта модуля:

 <script type="module" src="release.js"></script>