Utilizzo di Angular e localForage con Webpack

Question

Sto cercando di raccogliere angular, localForage e angular-localForage con webpack. Il mio bisogno di file di simile a questo,

// 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 e ui-bootstrap lavorato bene, ma quando ho bisogno angular-localForage le cose hanno cominciato a complicarsi. I miei webpack.config.js aspetto come questo,

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

Quando eseguo le applicazioni, sulla console che vedo questo errore

Uncaught TypeError: Cannot read property 'module' of undefined 

che si verifica in linea 1 della angular-localForage codice

'use strict'; 

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

Questo significa che angular non entri in tale ambito. Ho provato con imports-loader e exports-loader senza successo.

Qualche idea su come dovrebbe essere fatto?

Answer 1

Ciò accade perché angular-localforage si aspetta che "questo" sia l'ambito globale (finestra). Ho fatto il lavoro con il codice:

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

Questo codice dipende modulo NPM importazioni-loader quindi per favore gestita:

npm install imports-loader 

Ho anche aggiunto un po 'di configurazione per webpack per renderlo risolvere localforage correttamente:

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

non ti anche bisogno di richiedere localforage manualmente verrà aggiunto quando verrà analizzato angolare localForage.