【问题标题】:Webpack with bower support支持凉亭的 Webpack
【发布时间】:2016-02-03 18:46:19
【问题描述】:

我是否希望最好加载节点包,并且只有在不存在时才加载 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 ..

externals: {
    stamplay: 'Stamplay'
},

最后 .. new AngularPlugin 在 webpack.config 上转换为 plugins

这样,但是我不能使用angular-stamplay,当我尝试时,模块stamplay 出现错误。 :(

使用this change here查看分支

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

【问题讨论】:

    标签: angularjs bower webpack webpack-dev-server


    【解决方案1】:

    好的,从 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/ 喜欢 控制台说

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

    【讨论】:

    • 嗨@aishwat,出了点问题.. 即使在您的屏幕截图中,您也可以看到init 对象中没有init 函数。在stamplay-js-sdk 文档中,存在此功能。即使您展开对象详细信息,您也会看到这不是一个 Stamplay 对象。检查问题github.com/Stamplay/stamplay-js-sdk/issues/15
    • 好的,如果我在index.html Stamplay.init("APPID"); 在 index.html 上做一个简单的<script src="https://drrjhlchpvi7e.cloudfront.net/libs/stamplay-js-sdk/1.3.1/stamplay.min.js"></script> 可以工作,但没有它就不行。并且从stamplay.js我可以得到function(win){ })对象被附加,因为它在全局/窗口范围Function('return this')()。但是下一个函数(function (root) {})(this) 不会将init附加到Stamplay,因为它在this上下文中
    • 一个蹩脚的修复,在stamplay.js之前;(function(win){定义var that然后设置that=store里面;(function(win){然后在(function (root) {里面放that.init=root.Stamplay.init;然后你得到Stamplay.init工作。我不知道你想用 init 做什么:D
    • 谢谢..我会试试的。我只会将Stamplay 对象用作in the documentation :) 不仅Stamplay.init("APPID");,而且Stamplay 对象的所有api .. 就像new Stamplay.Cobject('dinner').Model;
    • @Ridermansb 但它不起作用,所以你接受吗?你有什么解决办法吗?
    猜你喜欢
    • 1970-01-01
    • 2017-10-02
    • 1970-01-01
    • 1970-01-01
    • 2017-03-14
    • 1970-01-01
    • 1970-01-01
    • 2014-03-09
    • 1970-01-01
    相关资源
    最近更新 更多