在 webpack 中使用 Angular 和 localForage

Question

我正在尝试将angular、localForage 和angular-localForage 与webpack 一起收集。我的需求文件是这样的，

// 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")

此代码依赖于 imports-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 时添加。