将AngularJS模块导出为ES6模块

Question

您应该根据styleguide将gangularjs模块包裹在iife中，我们使用

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

my-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
        }
    }
})();

app.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'

Answer 1

移至模块后，新结构已成为

app.js

import myDir from './my-dir.js'
angular.module('app', [myDir.name]);

my-dir.js

// import template from './my-dir.html'; // Can use this with template property
export default angular.module('my.dir', [])
    .controller('MyDirController', MyDirController)
    .directive('my-dir', MyDirDirective);
function MyDirDirective() {
    return {
        restrict: 'E',
        scope: true,
        bindToController: {},
        controllerAs: '$ctrl',
        template: '<div ng-bind="$ctrl.msg"></div>',
        controller: MyDirController
    };
}
function MyDirController() {
    const self = this;  // Not needed if using arrow functions
    self.msg = "Hello World";
}

不再需要iife，因为默认情况下，如果总是使用任何类型的JavaScript模块System