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”为全局范围（窗口）。我使用了代码：

npm install imports-loader

此代码依赖于imports-loader npm模块，请运行：

    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'
            }
        }
    };

我还为webpack添加了一些配置，以使其正确解析localforage：

{{1}}

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

将Angular和localForage与webpack一起使用

1 个答案: