導出angularjs模塊ES6模塊

你應該根據風格指南在IIFE包angularjs模塊，我們使用導出angularjs模塊ES6模塊

https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife

我-dir.js

(function() { 
    'use strict'; 

    angular 
     .module('my.dir', []) 
     .controller('MyDirController', MyDirController), 
     .directive('my-dir', MyDirDirective); 

    function MyDirController() { 

    } 

    function MyDirDirective() { 
     return { 
      restrict: 'E', 
      controller: MyDirController 
     } 
    } 
})();

應用。 js

(function() { 
    'use strict'; 
    angular 
     .module('app', ['my.dir']) 
})();

但是，正如我們現在使用webpack捆綁es6模塊。我們該如何使用這個IIFE和export？我們不能做export default angular.module('my-dir', [])，因爲導出必須是頂級命令。另外，我們應該返回一個模塊名稱的字符串？這樣它就可以在app模塊中作爲要求。什麼是最佳做法？

這工作，但你必須重新輸入模塊名，而且似乎有點亂具有IIFE外的出口（我假設有這種情況）

(function() { 
    angular.module('my.dir', []) 
     .controller('MyDirController', MyDirController) 
     .directive('my-dir', MyDirDirective); 

    function MyDirDirective(appPath) { 
     return { 
      restrict: 'E', 
      scope: {}, 
      bindToController: {}, 
      controllerAs: '$ctrl', 
      template: '<div ng-bind="$ctrl.msg"></div>', 
      controller: MyDirController 
     }; 
    } 

    function MyDirController() { 
     var self = this; 
     self.msg = "Hello World"; 
    } 
})(); 
export default 'my.dir'

來源

2017-05-03 tic

我猜想，對角的風格指南中使用IIFE註釋中使用像巴別塔或的WebPack工具時，不適用。這些工具也爲您解決了這些問題。使用webpack/babel，您可以採用其他方法編寫代碼：將上面的代碼寫成commonjs模塊（不帶IIFE），將上面的代碼轉換爲Typescript或ES6類等等。轉換可能有點冗餘你的代碼庫，但長期的好處是值得的:) –

移動的WebPack模塊後，新的結構已成爲

app.js

import myDir from './my-dir.js' 

angular.module('app', [myDir.name]);

我-dir.js

export default angular.module('my.dir', []) 
    .controller('MyDirController', MyDirController) 
    .directive('my-dir', MyDirDirective); 

function MyDirDirective(appPath) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     bindToController: {}, 
     controllerAs: '$ctrl', 
     template: '<div ng-bind="$ctrl.msg"></div>', 
     controller: MyDirController 
    }; 
} 

function MyDirController() { 
    var self = this; 
    self.msg = "Hello World"; 
}

不再需要的IIFE因爲現在一切都默認爲一個模塊，如果經常使用的WebPack建立

來源

2017-05-08 05:39:49 tic

導出angularjs模塊ES6模塊

回答

相關問題