现在有个项目是用webpack来搭建的,用的前端框架是angular@1.2.32,现在要用一个提示框,选的是angular-ui-notification。通过npm来安装。
angular如何在webpack中依赖模块?
在npm包管理器介绍是通过script标签来引入的。
...
<link rel="stylesheet" href="angular-ui-notification.min.css">
...
<script src="angular-ui-notification.min.js"></script>
我以为通过import
方法可以同样引入
import name from 'angular-ui-notification'
然而当我import的时候,我犯难了。name
==angularUiNotification
or ==angular-ui-notification
。后者显然是不对的,js下直接报错,所以我选了前者。
import angularUiNotification from 'angular-ui-notification'
当我这样写的时候,js还是报了一大坨错误:
var app=angular.module("app", ['angular-ui-notification'])
app.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 5000,
startTop: 10,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 20,
positionX: 'center',
positionY: 'top'
});
});
报错的信息:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module angular-ui-notification due to:
Error: [$injector:nomod] Module 'angular-ui-notification' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=angular-ui-notification
大概意思是`angular-ui-notification`这个模块不可用。想想也是,angular-ui-notification第一次出现,程序当然不知道它是怎么来的。也就是`import angularUiNotification`的时候,`angular-ui-notification`并没有并导入进来。也就是下面的写法有问题。
>```import angularUiNotification from 'angular-ui-notification'```
然后又找了其他资料,最终在stackoverflow中找到答案。
http://stackoverflow.com/questions/27475820/webpack-browserify-and-ui-router
> ``` angular.module("app", [require("angular-ui-notification")]);```
在模块依赖的时候,直接require,当然前提是要先npm install angular-ui-notification -D
###依赖css
要想完整实现功能,还需要引入css,这个比较简单
import 'angular-ui-notification/dist/angular-ui-notification.min.css'