将 ECMAScript-6 集成到现有的 AngularJS 项目中答案

【问题标题】：Integrate ECMAScript-6 into existing AngularJS project将 ECMAScript-6 集成到现有的 AngularJS 项目中
【发布时间】：2016-02-11 15:27:02
【问题描述】：

我正在尝试将 ECMA6 集成到现有的 Angular 项目中。我正在为我们遇到的一些问题寻找最佳实践。所有组件（我们有很多）都具有以下文件结构：

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

在构建时，Gulp 执行 concat 并且一切正常。

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

1) 将自己的所有“somemodul”文件合并为单个文件：

//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'：

//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
}

这两个选项都有效。不幸的是，这两种选择都需要大量的动手工作。所以我正在寻找其他可能的解决方案......

谢谢。

【问题讨论】：

你用 webpack 标记了这个问题，所以我假设你使用的是 webpack？ Webpack 为你解决了这个问题，它捆绑了文件。
你说得对，我正在使用带有 gulp 的 webpack，我会以 webpack.config.js 为例，在我的例子中使用 webpack。谢谢
你真的必须阅读 webpack 教程和文档。 webpack.github.io/docs/tutorials/getting-started
@FelixKling ，可能我没有解释清楚。我花了将近一周的时间进行研究和测试，我浏览了很多教程，我可以自己写（可能有一天会写）。不仅如此，我已经在生产环境中运行带有（WebPack、EC6、AngularJS）的 SaaS 平台。所以我正在寻找解决方案如何导出/导入拼接在多个文件上的模块？谢谢。

标签： javascript angularjs ecmascript-6 webpack babeljs

【解决方案1】：

找到的解决方案是使用 require.context()。

在我的例子中，它看起来像这样：

//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$/));

我尝试不使用 require 并且只使用 (export/import)，但看起来这只是一种方式。

【讨论】：