Использование Angular и localForage с webpack

Я пытаюсь собрать 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

Что происходит в строке 1 кода angular-localForage

'use strict';

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

Это означает, что angular не входит в эту область. Я пробовал с imports-loader и exports-loader без успеха.

Любые идеи о том, как это сделать?

Ответы

Ответ 1

Это происходит потому, что angular -localforage ожидает, что "this" будет глобальной областью (окном). Я сделал это с кодом:

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

Этот код зависит от модуля 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'
            }
        }
    };

Вам также не нужно требовать, чтобы локальный ресурс вручную был добавлен, когда будет обработан angular -localForage.