angularjs - 支持 bower 的 Webpack

标签 angularjs bower webpack webpack-dev-server

我想最好加载节点包,并且只有在不存在时才加载 bower 包。

I would just use the node package only as recommended in Webpack site, but I need to load a library that is just in bower, https://github.com/Stamplay/stamplay-js-sdk and https://github.com/Stamplay/angular-stamplay



试试 bower-webpack-plugin

我安装了https://github.com/lpiepiora/bower-webpack-plugin

但是当我运行 webpack-dev-server -d --watch错误显示在 chrome 控制台中:
Uncaught TypeError: angular.module is not a function(anonymous function) @ app.js:8__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ @ bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) @ bootstrap 6cecf8d96fb5a1205f10:39
angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' 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.

尝试使用 ResolverPlugin (参见 Webpack docs )

在 webpack.config 我添加..
plugins: [
     ...
    , new webpack.ProvidePlugin({
        Q: 'q',
        store: 'store.js',
        Stamplay: 'stamplay-js-sdk'
    })
    , new webpack.ResolverPlugin(
        [
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"]
    )

],
....
resolve: {
    root: [
        path.join(__dirname, 'node_modules'),
        path.join(__dirname, 'bower_components')
    ],

但是,就像提到 here Stamplay对象不正确!

尝试使用 CDN 和 angular-webpack-plugin

首先将脚本标签添加到 index.html ..

其次,在 webpack.config 中添加 externals ..
externals: {
    stamplay: 'Stamplay'
},

最后.. new AngularPlugin进入 plugins在 webpack.config 上

这样,工作 但是 我无法使用 angular-stamplay ,当我尝试时,模块中的错误 stamplay出现。 :(

使用 this change here 查看分支

完整的项目在这里:https://github.com/Ridermansb/webpackBowerStarter

最佳答案

好的,从 git https://github.com/Ridermansb/webpackBowerStarter 尝试了你的项目

正如 https://github.com/lpiepiora/bower-webpack-plugin/issues/20 中所述我也有那个Cannot resolve module 'stamplay-js-sdk'问题,然后在 webpackBowerStarter 目录中我做了 bower install stamplay-js-sdk然后 sudo npm run build瞧!它完成了。

npm run startwebpack-dev-server -d --watch 相同我得到 http://localhost:8080/webpack-dev-server/
http://localhost:8080/webpack-dev-server/
控制台说
enter image description here

对不起,如果你的意思是别的。这能解决您的问题吗?

关于angularjs - 支持 bower 的 Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33502112/

相关文章:

css - Webpack 无法识别 css 加载器

javascript - bower.json 中的 ~ 和 ^ 有什么区别?

javascript - WebStorm 中的路径别名与 webpack 中的一样

javascript - 无法读取未定义的属性 'module'

Javascript 搜索栏过滤器,在页面上隐藏/显示

uninstallation - 你如何卸载 Bower(包管理器)?

javascript - 使用 grunt 和 dist 项目文件夹进行开发和部署时如何管理 Bower 依赖项?

javascript - 使用 Webpack 时如何在 Service Worker 中导入脚本

javascript - angularjs ns-显示逻辑流程

javascript - 在 DIV Angular JS 之间切换