整合ECMAScript的6到现有AngularJS项目 [英] Integrate ECMAScript-6 into existing AngularJS project

问题描述

我想ECMA6集成到现有项目的角度。
我期待为一些问题，我们有一个最好的做法。
所有组件（和我们有很多）具有以下文件结构：

I'm trying to integrate ECMA6 into existing Angular project. And I'm looking for a best practise for some issues we have. All components (and we have a lot) have following file structure:

-app/  
  --components/
    --somemodul/
     --somemodul.mdl.js
     --somemodul.drv.js
     --somemodul.ctrl.js
     --somemodul.srv.js
     --somemodul.tmpl.html
-app.js

//somemodul.mdl.js
(function () {
    angular.module('somemodul', []); //initiate module
})()

//somemodul.drv.js
(function () {
    angular.module('somemodul')
        .directive('someModuleDrv', someModuleDrv); //add to module

    function someModuleDrv() {
        // CODE
    }
})()

//somemodul.ctrl.js
(function () {
    angular.module('somemodul')
        .controller('someModuleCtrl', someModuleCtrl); //add to module

    function someModuleCtrl() {
        // CODE
    }
})()

//somemodul.srv.js
(function () {
    angular.module('somemodul')
        .service('someModuleSrv', someModuleSrv); //add to module

    function someModuleSrv() {
        // CODE
    }
})();

在构建，咕嘟咕嘟做CONCAT，一切工作正常。

On build, Gulp do concat and everything works fine.

使用ECMA6我们需要导入所有这些模块到app.js.
现在我看到两个选项：

With ECMA6 We need to import all these modules into app.js. And now I see two options:

1）concate自己所有的somemodul文件到单个文件：

1) To concate myself all 'somemodul' files into single file:

//somemodul.js
export default angular.module('somemodul', [])
        .directive('someModuleDrv', someModuleDrv)
        .service('someModuleSrv', someModuleSrv)
        .controller('someModuleCtrl', someModuleCtrl);


    function someModuleDrv() { };
    function someModuleSrv() {  };
    function someModuleCtrl() {  };

2）导入所有子成somemodule.mdl.js

2) Import all submodules into 'somemodule.mdl.js':

//somemodul.mdl.js
import someModuleDrv from './somemodul.drv.js'
import someModuleSrv from './somemodul.srv.js'
import someModuleCtrl from './somemodul.ctrl.js'

export default angular.module('somemodul', [
    someModuleDrv.name,
    someModuleSrv.name,
    someModuleCtrl.name
]);


//somemodul.drv.js
export default angular.module('somemodul.drv', [])
    .directive('someModuleDrv', someModuleDrv);

function someModuleDrv() {
    // CODE
}


//somemodul.srv.js
export default angular.module('somemodul.srv', [])
    .directive('someModuleSrv', someModuleSrv);

function someModuleSrv() {
    // CODE
}


//somemodul.ctrl.js
export default angular.module('somemodul.ctrl', [])
    .directive('someModuleCtrl', someModuleCtrl);

function someModuleCtrl() {
    // CODE
}

这两个选项的作品。
不幸的是这两个选项需要大量的动手工作。
所以我在寻找可能的其他解决办法.....

Both options works. Unfortunately both options requires a lot of hands-on work. So I'm looking for possible other solution.....

感谢。

推荐答案

找到的解决方案是使用require.context（）。

Found solution is using require.context().

在我的情况下，它会看起来像这样：

In my case it will looks like this:

//somemodul.js
export default angular.module('somemodul', [])
/**
 * Requires all directives from subdirectories.
 * @param requireContext
 * @returns {*}
 */
function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
requireAll(require.context(".", true, /^\.\/.*\.js$/));

我试过不使用要求只有用（出口/进口）留下来，但看起来只有一个办法。

I tried do not use require and stay only with (export/import), but looks like it's only one way.

这篇关于整合ECMAScript的6到现有AngularJS项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！