Question

我目前正在重构我的angularjs应用程序，以便使用webpack和lazyloading。

我想只加载angularjs模块中的一个指令，而不是将整个模块加载到防止生成包中未使用的代码。

是否可以，稍作修改？

像

这样的东西

import {MyDirective} from './my-module.js';

Answer 1

考虑到您使用的是es6 / es2015语法（babel / ts-node）。您的模块必须导出方法，而不是像导入一样使用它。使用导出语法：

// My module 
export { cube, foo, graph };
// Importing
import {cube } from './mymodule'

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

然而，出口指令是这样的。您需要创建一个指令函数并在模块中重用该函数并同时导出。见下面给出的例子

// Directive function
angular.module([]).directive('myCustomer', MyCustomDirective);

function MyCustomDirective() {
  return {
    restrict: 'E',
    scope: {
      customerInfo: '=info'
    },
    template: '<template>something here</template>'
  };
}

export {MyCustomDirective}

使用webpack从angularjs模块加载特定指令

1 个答案: