将AngularJS模块导出为ES6模块

Question

根据我们使用的风格指南，你应该用立即执行函数表达式(IIFE)来包装AngularJS模块。

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

应用程序主文件

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

但是现在我们正在使用Webpack来捆绑ES6模块。那么我们应该如何使用这个IIFE和export呢？我们无法像这样执行export default angular.module('my-dir', [])，因为export必须是顶级命令。此外，我们应该只返回一个字符串作为模块的名称吗？这样它就可以作为app模块中的require包含进来了。哪种方法最佳实践？这个方法可行，但你必须重新输入模块名称，并且似乎将export放在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'

- tic

---

我猜在Angular风格指南中关于使用IIFE的评论在使用babel或webpack等工具时不适用。这些工具也为您解决了这些问题。使用webpack/babel，您可以采取其他方法来编写代码：将上述内容编写为commonjs模块（无IIFE），将上述内容转换为Typescript或ES6类等。将代码库转换可能需要一些重复的工作，但长期受益是值得的 :) - Sunil D.

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

现在，如果始终使用任何种类的JavaScript模块系统，那么IIFE就不再需要了。

- tic

---

你使用Webpack编译了这个吗？ - tubbsy