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

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}