将Angular和localForage与webpack一起使用

Question

我正在努力收集angular,localForage并angular-localForage与webpack.我的require文件看起来像这样,

// Angular libs
require('../bower_components/angular/angular.min.js')
require('../bower_components/angular-resource/angular-resource.min.js')
require('../bower_components/angular-ui-router/release/angular-ui-router.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap.min.js')
require('../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js')

require('../bower_components/localforage/dist/localforage.min.js')
require('../bower_components/angular-localforage/dist/angular-localForage.js')

angular-resource,angular-ui-router并且ui-bootstrap工作得很好,但是当我需要angular-localForage的东西开始变得复杂.我webpack.config.js看起来像这样,

var path = require('path')

module.exports = {
    entry: "./src/app/app.js",
    output: {
        path: './src/assets',
        filename: "bundle.js",
        publicPath: 'assets/'
    }
    , module: {
        loaders: [
            {test: /\.less$/, loader: "style!css!less"},
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

        ]
    }
    , resolve: {
        root: [ path.resolve('./src/bower_components') ]
        , moduleDirectories: ['./src/bower_components']
    }    
};

当我运行应用程序时,在控制台上我看到了这个错误

Uncaught TypeError: Cannot read property 'module' of undefined

这发生在angular-localForage代码的第1行

'use strict';

1:  var angularLocalForage = angular.module('LocalForageModule', ['ng']);
2:  angularLocalForage.provider('$localForage', function() {
3:    var lfInstances = {},

这意味着angular没有进入该范围.我试着imports-loader和exports-loader没有成功.

有什么想法应该怎么做？

Answer 1

发生这种情况是因为angular-localforage期望"this"为全局范围(窗口).我已经使它与代码一起工作:

require("imports?this=>window!angular-localforage/dist/angular-localForage.js")

这段代码依赖于import-loader npm模块,所以请运行:

npm install imports-loader

我还为webpack添加了一些配置,使其能够正确解析localforage:

    var path = require('path')

    module.exports = {
        entry: "./app.js",
        output: {
            path: './',
            filename: "bundle.js",
            publicPath: '/'
        }
        , module: {
            loaders: [
                {test: /\.less$/, loader: "style!css!less"},
                {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
                {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
                {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
                {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
                {
                    include: [
                        path.resolve(__dirname, "bower_components/localforage")
                    ],
                    //Export localforage var
                    loader: 'exports-loader?localforage'
                }
            ]
            //Don't parse 'require' inside localforage because wepack can't resolve it coorectly
            , noParse: /localforage\./
        }
        , resolve: {
            root: [ path.resolve('./bower_components') ]
            , moduleDirectories: ['./bower_components']
            , alias: {
                //Make webpack to load compiled version, not source.
                'localforage': 'localforage/dist/localforage.js'
            }
        }
    };

您还不需要手动要求localforage,它将在解析angular-localForage时添加.