web-dev-qa-db-ja.com

es6モジュールとしてangularjsモジュールをエクスポートする

私たちが使用するスタイルガイドに従って、angularjsモジュールを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モジュールにrequireとして含めることができるようにします。ベストプラクティスは何ですか？

これは機能しますが、モジュール名を再入力する必要があり、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'
_
javascriptangularjsbabeles6-module-loader
6
tic

モジュールに移行した後、新しい構造は

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は不要になりました。

17
tic