Sử dụng Góc và bộ nhớ cục bộ với gói web

Question

Tôi đang cố gắng thu thập angular, localForage và angular-localForage với webpack. Tôi yêu cầu tập tin trông như thế này,

// 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 và ui-bootstrap chỉ làm việc tốt, nhưng khi tôi yêu cầu angular-localForage mọi thứ bắt đầu trở nên phức tạp. My webpack.config.js vẻ như thế này,

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

Khi tôi chạy các ứng dụng, trên giao diện điều khiển tôi thấy lỗi này

Uncaught TypeError: Cannot read property 'module' of undefined 

nào xảy ra trong dòng 1 của angular-localForage đang

'use strict'; 

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

Điều này có nghĩa rằng angular không tham gia vào phạm vi đó. Tôi đã thử với imports-loader và exports-loader không thành công.

Bất kỳ ý tưởng nào về việc nên thực hiện điều này như thế nào?

Answer 1

Điều này xảy ra do góc địa hình góc nhìn "này" là phạm vi toàn cầu (cửa sổ). Tôi đã làm cho nó làm việc với mã:

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

Mã này phụ thuộc vào mô-đun NPM nhập khẩu-loader vì vậy hãy chạy:

npm install imports-loader 

Tôi cũng đã bổ sung thêm một số cấu hình cho webpack để làm cho nó giải quyết localforage một cách chính xác:

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

Bạn cũng không cần phải yêu cầu địa phương theo cách thủ công, nó sẽ được thêm khi phương thức góc-nội bộ sẽ được phân tích cú pháp.