Как заставить узлы работать в проекте AngularJS?

Я хочу использовать Smart App Banner в своем проекте AngularJS, smart-app-banner использования npm управлять собой.

Руководство очень просто и все в одном файле HTML. Однако в реальном проекте нам нужно поместить каждый файл в нужное место.

  1. CSS (мой проект использует scss)

В sampleесть одна строка в head в HTML-файл:

<link rel="stylesheet" href="node_modules/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">

Так что в моем проекте я импортирую этот файл CSS в app.scss:

@import "node_modules/smart-app-banner/smart-app-banner";
  1. JS (мой проект использует ECMAScript 6)

В sampleЕсть две части для JS в body в HTML-файл:

Первая часть:

<script src="node_modules/smart-app-banner/smart-app-banner.js"></script>

Так что в моем проекте я импортирую этот файл JS в app.js:

import "smart-app-banner";

Вторая часть:

<script type="text/javascript">
  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
      appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
      title: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });
</script>

Поэтому в моем проекте я создаю новый файл JS под названием smart-banner.js в том же каталоге, что и app.js файл, и вставьте этот код, затем импортируйте файл js в app.js

import "./smart-banner";

смарт-banner.js:

  new SmartBanner({
      daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
      daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
      appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
      title: 'MyPage',
      author: 'MyCompany LLC',
      button: 'VIEW',
      store: {
          ios: 'On the App Store',
          android: 'In Google Play',
          windows: 'In Windows store'
      },
      price: {
          ios: 'FREE',
          android: 'FREE',
          windows: 'FREE'
      }
      // , force: 'ios' // Uncomment for platform emulation
  });

Но это не работает. Баннер не отображался правильно. Какой-то шаг не так? Как проверить эти процессы шаг за шагом, чтобы убедиться, что каждый файл работает правильно?

Источник

1 ответ

Решение

Я нашел ответ. Проблема произошла при импорте файла JS.

Потому что это так ECMAScript 6 с babelв документации сказано:

Импортируйте все содержимое модуля. Это вставит myModule в текущую область, содержащую все экспортированные привязки из "my-module.js".

import * as myModule from "my-module";

Импортировать одного члена модуля. Это вставит myMember в текущую область.

import {myMember} from "my-module";

Импортируйте весь модуль только для побочных эффектов, без импорта каких-либо привязок.

import "my-module";

Так что это не сработало, если только импортировать файл js. Вместо этого нужно импортировать класс

import SmartBanner from smart-app-banner;

Более того, вы не можете поместить импорт в app.js, вам нужно положить его в файл js, который вы используете класс.

Источник
Другие вопросы по тегам