将 angularjs 模块导出为 es6 模块答案

【问题标题】：Exporting angularjs module as es6 module将 angularjs 模块导出为 es6 模块
【发布时间】：2017-05-03 18:20:36
【问题描述】：

您应该根据我们使用的样式指南将 angularjs 模块包装在 IIFE 中

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

我的目录.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', [])，因为 export 必须是顶级命令。另外，我们应该只返回模块名称的字符串吗？这样它就可以作为 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'

【问题讨论】：

我猜想 Angular 风格指南中关于使用 IIFE 的 cmets 在使用 babel 或 webpack 之类的工具时并不适用。这些工具也为您解决了这些问题。使用 webpack/babel，您可以采用其他方法编写代码：将上面的代码编写为 commonjs 模块（不带 IIFE），将上面的代码转换为 Typescript 或 ES6 类等。转换可能有点多余的工作你的代码库，但长期的好处是值得的 :)

标签： javascript angularjs babeljs es6-module-loader

【解决方案1】：

移到模块后，新的结构变成了

app.js

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

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

我的目录.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 模块系统，现在所有东西都默认是一个模块

【讨论】：

你是用 webpack 编译的吗？