Webpack与bower支持

时间:2015-11-03 14:52:56

标签: angularjs bower webpack webpack-dev-server

我是否希望最好加载节点包,并且只有在不存在的情况下才会加载bower包。

  

我只会按照Webpack网站中的建议使用节点包,但我需要加载一个只有凉亭的库,https://github.com/Stamplay/stamplay-js-sdkhttps://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: {
    stamplay: 'Stamplay'
},

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

这样,当我尝试在模块angular-stamplay apper中出错时,我不能我无法使用stamplay。 :(

请参阅this change here

分支

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

1 个答案:

答案 0 :(得分:2)

好的,从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 start相同的webpack-dev-server -d --watch上,我得到http://localhost:8080/webpack-dev-server/ http://localhost:8080/webpack-dev-server/ 而控制台说 enter image description here

如果你的意思是别的什么的话。这会解决您的问题吗?