如何使节点模块在AngularJS项目中工作？

Question

我想在我的AngularJS项目中使用AngularJS，smart-app-banner使用npm来管理自己。

该指南非常简单，并且都包含在一个html文件中。然而，在实际项目中，我们需要将每个文件放在正确的位置。

1. CSS (我的项目使用scss)

在sample中，head文件中有一行：

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

因此，在我的项目中，我在app.scss中导入这个css文件。

@import "node_modules/smart-app-banner/smart-app-banner";

1. JS (我的项目使用ECMAScript 6)

在sample中，body中的JS在html文件中有两个部分：

第一部分：

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

所以在我的项目中，我在app.js中导入了这个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>

因此，在我的项目中，我在与smart-banner.js文件相同的目录中创建了一个名为app.js的新js文件，并将代码放入其中，然后在app.js中导入js文件。

import "./smart-banner";

smart-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
  });

但是，这不管用。横幅显示不正确。有什么问题吗？如何一步一步地检查这些过程，以确保每个文件正确工作？

Answer 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文件中。