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

Question

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

该指南非常简单，全部在一个 html 文件中。但是，在实际项目中，我们需要将每个文件放在正确的位置。

CSS（我的项目使用scss）

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

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

JS（我的项目使用ECMAScript 6）

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

第一部分：

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

所以在我的项目中，我在app.js文件的同一目录下新建了一个名为smart-banner.js的js文件，并将这段代码放入，然后在app.js中导入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
  });

但是，它不起作用。横幅未正确显示。有哪一步错了吗？如何逐步检查这些过程以确保每个文件都正常工作？

Answer 1

我找到了答案。问题发生在导入JS文件时。

因为它是 ECMAScript 6 和 babel，在 documentation 中，它说：

Import an entire module's contents. This inserts myModule into the current scope, containing all the exported bindings from "my-module.js".

import * as myModule from "my-module";

Import a single member of a module. This inserts myMember into the current scope.

import {myMember} from "my-module";

Import an entire module for side effects only, without importing any bindings.

import "my-module";

所以只导入js文件是不行的。相反，它需要导入 class

import SmartBanner from smart-app-banner;

此外，你不能将导入放在app.js中，你需要将它放在你使用class.

的js文件中

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

How to make the node modules working in AngularJS project?

npm

angularjs

node-modules

smartbanner

android-banner