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

Question

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

我只想从 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}