将angularjs模块导出为es6模块 [英] Exporting angularjs module as es6 module

问题描述

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

You are supposed to wrap angularjs modules in an IIFE according to the styleguide, which we use

https://github.com/johnpapa/angular-styleguide/树/主/a1#iife

my-dir.js

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', [])，因为export必须是顶层命令.另外，我们应该只返回模块名称的字符串吗?这样就可以根据需要将其包含在app模块中.什么是最佳做法?

But as we are now using webpack to bundle es6 modules. How are we supposed to use this IIFE and export? We can't do export default angular.module('my-dir', []) as export must be a top-level command. Also, we should just be returning a string of the name of the module? So that it can be included as a require in the app module. What is best practice?

这可行，但是您必须重新输入模块名称，并且在IIFE之外进行导出似乎有些混乱(我认为一定是这种情况)

This works, but you have to retype the module name, and seems a bit messy having the export outside the IIFE (Which I assume has to be the case)

(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'

推荐答案

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

After moving to modules, the new structure has become

app.js

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

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

my-dir.js

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模块系统，则默认情况下所有内容都是一个模块

The IIFE is no longer needed as now everything is by default a module if always using any kind of javascript module system

这篇关于将angularjs模块导出为es6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！