ウェブパックで角度とローカルフェアを使用する

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物事が複雑になり始めたときに必要。私は、アプリケーションを実行すると、コンソール上で私はangular-localForageコードの1行目に

'use strict'; 

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

この手段を発生し、このエラー

Uncaught TypeError: Cannot read property 'module' of undefined 

を参照してください

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

このような私のwebpack.config.jsルックス、 angularはそのスコープに入っていません。私はimports-loaderとexports-loaderで試してみましたが、成功しませんでした。

これはどのように行うべきですか？

Answer 1

これは、angular-localforageが "this"がグローバルスコープ（ウィンドウ）になることを期待しているためです。私はそれがコードで動作してきた：

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

このコードは、輸入・ローダーNPMモジュールに依存しますので、実行してください：

npm install imports-loader 

を、私はそれが正しくlocalforageを解決するためにWebPACKのためのいくつかの設定をも追加しました：

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を手動で設定する必要はありません。手動でangle-localForageが解析されるときに追加されます。